添加tag

zuoxiao

2024-07-04 c6ad105d1b743bcfd8aa6ee2781d39039f319a87

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./progress.wxs" module="this" />
 
<view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class">
  <view
    wx:if="{{theme === this.PRO_THEME.LINE}}"
    class="{{classPrefix }}--thin {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
  >
    <view
      aria-role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="{{computedProgress}}"
      aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
      aria-live="polite"
      class="{{classPrefix }}__bar"
      style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"
    >
      <view
        class="{{classPrefix }}__inner {{prefix}}-class-bar"
        style="background: {{colorBar}}; width: {{computedProgress + '%'}}"
      ></view>
    </view>
    <!-- aria-hidden=true 禁用掉额外的聚焦 -->
    <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
      <template
        wx:if="{{_.includes(this.STATUS, status)}}"
        is="icon"
        data="{{class: classPrefix + '__icon', size:'44rpx', name: this.LINE_STATUS_ICON[status]}}"
      ></template>
      <text wx:else>{{ _.isString(label)? label: computedProgress + '%' }}</text>
    </view>
    <slot name="label" />
  </view>
 
  <view
    aria-role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{computedProgress}}"
    aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
    aria-live="polite"
    wx:if="{{theme === this.PRO_THEME.PLUMP}}"
    class="{{classPrefix}}__bar {{classPrefix}}--plump {{computedProgress > 10 ? classPrefix + '--over-ten':  classPrefix + '--under-ten'}} {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
    style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"
  >
    <view
      class="{{classPrefix}}__inner {{prefix}}-class-bar"
      style="background: {{colorBar}}; width: {{computedProgress}}%"
    >
      <view wx:if="{{label && computedProgress > 10}}" class="{{classPrefix }}__info {{prefix}}-class-label">
        <text>{{ _.isString(label)? label: computedProgress + '%' }}</text>
      </view>
      <slot name="label" />
    </view>
    <view
      wx:if="{{label && computedProgress <= 10}}"
      class="{{ classPrefix }}__info {{prefix}}-class-label"
      aria-hidden="{{ true }}"
    >
      <text>{{ _.isString(label)? label: computedProgress + '%' }}</text>
    </view>
    <slot name="label" />
  </view>
 
  <view
    wx:if="{{theme === this.PRO_THEME.CIRCLE}}"
    class="{{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
  >
    <view
      aria-role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="{{computedProgress}}"
      aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
      aria-live="polite"
      class="{{classPrefix}}__canvas--circle"
      style="background-image: conic-gradient( {{colorCircle || this.STATUS_COLOR[status] || '#0052d9'}} {{computedProgress}}%, {{bgColorBar || '#e7e7e7'}} 0%);"
    >
      <view
        class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
        style="{{innerDiameter? 'width:'+ innerDiameter*2 + 'rpx;' + 'height:'+ innerDiameter*2 + 'rpx;': ''}}"
      >
        <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
          <template
            wx:if="{{_.includes(this.STATUS, status)}}"
            is="icon"
            data="{{class: classPrefix + '__icon', size:'96rpx', name: this.CIRCLE_STATUS_ICON[status]}}"
          ></template>
          <text wx:else>{{ _.isString(label)? label: computedProgress + '%' }}</text>
        </view>
        <slot name="label" />
      </view>
    </view>
  </view>
</view>