加入字体粗细

pages/componentsC/countTo/index.vue

@@ -4,23 +4,33 @@
       <view class="u-demo-title">演示效果</view>
       <view class="u-demo-area">
         <u-toast ref="uToast"></u-toast>
-				<view class="u-no-demo-here">
-					如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明
-				</view>
+        <view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
         <view class="count-to-demo">
-					<u-count-to class="count-to" :useEasing="useEasing" ref="uCountTo" :autoplay="autoplay"
-					:startVal="startVal" :endVal="endVal" :duration="duration" :decimals="decimals"
-					@end="end"></u-count-to>
+          <u-count-to
+            class="count-to"
+            :useEasing="useEasing"
+            ref="uCountTo"
+            :autoplay="autoplay"
+            :startVal="startVal"
+            :endVal="endVal"
+            :duration="duration"
+            :decimals="decimals"
+            :fontWeight="fontWeight"
+            @end="end"
+          ></u-count-to>
         </view>
       </view>
     </view>
     <view class="u-config-wrap">
-			<view class="u-config-title u-border-bottom">
-				参数配置
-			</view>
+      <view class="u-config-title u-border-bottom">参数配置</view>
       <view class="u-config-item">
         <view class="u-item-title">状态</view>
-				<u-subsection vibrateShort :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
+        <u-subsection
+          vibrateShort
+          :current="current"
+          :list="['启动', '暂停', '继续', '重置']"
+          @change="statusChange"
+        ></u-subsection>
       </view>
       <view class="u-config-item">
         <view class="u-item-title">目标值</view>
@@ -34,6 +44,15 @@
         <view class="u-item-title">显示小数</view>
         <u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
       </view>
+      <view class="u-config-item">
+        <view class="u-item-title">字体加粗</view>
+        <u-subsection
+          vibrateShort
+          current="1"
+          :list="['normal', 'bold', 'bolder','lighter']"
+          @change="fontWidthChange"
+        ></u-subsection>
+      </view>
     </view>
   </view>
 </template>
@@ -44,13 +63,14 @@ export default {
     return {
       startVal: 0,
       endVal: 608,
-			separator: ',',
+      separator: ",",
       decimals: 0,
       duration: 2000,
       autoplay: false,
       useEasing: true,
       current: 3,
       isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
+      fontWeight: 400
     };
   },
   methods: {
@@ -62,16 +82,20 @@ export default {
     durationChange(index) {
       this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
     },
+    fontWidthChange(index) {
+      let arr = ["normal", "bold", "bolder", "lighter"];
+      this.fontWeight = arr[index];
+    },
     decimalsChange(index) {
       this.decimals = index == 0 ? 2 : 0;
     },
     statusChange(index) {
       this.current = index;
-			if(index == 0) {
+      if (index == 0) {
         this.start();
-			} else if(index == 1) {
+      } else if (index == 1) {
         this.stop();
-			} else if(index == 2){
+      } else if (index == 2) {
         this.resume();
       } else {
         this.reset();
@@ -80,9 +104,9 @@ export default {
     end() {
       this.current = 3;
       this.$refs.uToast.show({
-				type: 'warning',
-				title: '滚动结束'
-			})
+        type: "warning",
+        title: "滚动结束"
+      });
     },
     start() {
       this.current = 0;
@@ -93,15 +117,15 @@ export default {
       this.$refs.uCountTo.stop();
     },
     resume() {
-			if(!this.isStop) {
+      if (!this.isStop) {
         this.$refs.uToast.show({
-					type: 'error',
-					title: '请开始并暂停后才能继续'
-				})
+          type: "error",
+          title: "请开始并暂停后才能继续"
+        });
         this.$nextTick(() => {
           this.current = 3;
-				})
-				return ;
+        });
+        return;
       }
       this.$refs.uCountTo.resume();
     },

uview/components/u-count-to/u-count-to.vue

 <template>
-	<view class="u-count-num" :style="{
+  <view
+    class="u-count-num"
+    :style="{
 		fontSize: fontSize + 'rpx',
+    fontWeight:fontWeight,
 		color: color
-	}">
-		{{ displayValue }}
-	</view>
+	}"
+  >{{ displayValue }}</view>
 </template>
 
 <script>
@@ -44,23 +46,28 @@ export default {
     // 十进制分割
     decimal: {
       type: [Number, String],
-			default: '.'
+      default: "."
     },
     // 字体颜色
     color: {
       type: String,
-			default: '#303133'
+      default: "#303133"
     },
     // 字体大小
     fontSize: {
       type: [Number, String],
       default: 50
     },
+    // 字体粗细
+    fontWeight: {
+      type: [Number, String],
+      default: 400
+    },
     // 千位分隔符，类似金额的分割(￥23,321.05中的",")
     separator: {
       type: String,
-			default: ''
-		},
+      default: ""
+    }
   },
   data() {
     return {
@@ -152,27 +159,47 @@ export default {
       this.remaining = this.localDuration - progress;
       if (this.useEasing) {
         if (this.countDown) {
-					this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+          this.printVal =
+            this.localStartVal -
+            this.easingFn(
+              progress,
+              0,
+              this.localStartVal - this.endVal,
+              this.localDuration
+            );
         } else {
-					this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+          this.printVal = this.easingFn(
+            progress,
+            this.localStartVal,
+            this.endVal - this.localStartVal,
+            this.localDuration
+          );
         }
       } else {
         if (this.countDown) {
-					this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+          this.printVal =
+            this.localStartVal -
+            (this.localStartVal - this.endVal) *
+              (progress / this.localDuration);
         } else {
-					this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+          this.printVal =
+            this.localStartVal +
+            (this.endVal - this.localStartVal) *
+              (progress / this.localDuration);
         }
       }
       if (this.countDown) {
-				this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+        this.printVal =
+          this.printVal < this.endVal ? this.endVal : this.printVal;
       } else {
-				this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+        this.printVal =
+          this.printVal > this.endVal ? this.endVal : this.printVal;
       }
       this.displayValue = this.formatNumber(this.printVal);
       if (progress < this.localDuration) {
         this.rAF = this.requestAnimationFrame(this.count);
       } else {
-				this.$emit('end');
+        this.$emit("end");
       }
     },
     // 判断是否数字
@@ -181,14 +208,14 @@ export default {
     },
     formatNumber(num) {
       num = num.toFixed(Number(this.decimals));
-			num += '';
-			const x = num.split('.');
+      num += "";
+      const x = num.split(".");
       let x1 = x[0];
-			const x2 = x.length > 1 ? this.decimal + x[1] : '';
+      const x2 = x.length > 1 ? this.decimal + x[1] : "";
       const rgx = /(\d+)(\d{3})/;
       if (this.separator && !this.isNumber(this.separator)) {
         while (rgx.test(x1)) {
-					x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+          x1 = x1.replace(rgx, "$1" + this.separator + "$2");
         }
       }
       return x1 + x2;