fix(countup、barrage): 优化重构 (#775)

src/packages/__VUE/barrage/demo.vue

@@ -5,9 +5,7 @@
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
     <div class="test">
-      <button @click="addDanmu" class="add nut-button--primary"
-        >随机添加</button
-      >
+      <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
     </div>
   </div>
 </template>
@@ -21,14 +19,7 @@ export default createDemo({
   setup() {
     const inputVal = ref<any>('');
     const danmu = ref<any>(null);
-    let list = ref([
-      '画美不看',
-      '不明觉厉',
-      '喜大普奔',
-      '男默女泪',
-      '累觉不爱',
-      '爷青结'
-    ]);
+    let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
     function addDanmu() {
       let n = Math.random();
       danmu.value.add('随机——' + String(n).substr(2, 10));

src/packages/__VUE/barrage/index.scss

@@ -8,6 +8,8 @@
   box-sizing: border-box;
   background-color: #f7f8fa;
   .dmitem {
+    width: 100px;
+    // max-width: 150px;
     display: block;
     position: absolute;
     right: 0;
@@ -30,7 +32,9 @@
       transform: translateX(100%);
     }
     to {
-      transform: translateX(var(--move-distance));
+      transform: translateX(-250%);
+      // transform: translateX(-180%);
+      // transform: translateX(var(--move-distance));
     }
   }
   @-webkit-keyframes moving {
@@ -38,7 +42,7 @@
       -webkit-transform: translateX(100%);
     }
     to {
-      -webkit-transform: translateX(var(--move-distance));
+      transform: translateX(-250%);
     }
   }
 }

src/packages/__VUE/barrage/index.taro.vue

@@ -1,9 +1,15 @@
 <template>
   <view class="dmBody" :class="classes">
-    <view class="dmContainer" id="dmContainer"></view>
-    <!-- <view v-for="(item, index) of danmuList" :key="'danmu'+index" class="dmitem">
-      {{item}}
-    </view> -->
+    <view class="dmContainer" id="dmContainer">
+      <view
+        v-for="(item, index) of danmuList"
+        :key="'danmu' + index"
+        :class="['dmitem', 'dmitem' + index, 'move']"
+        :style="styleList[index]"
+      >
+        {{ item.length > 8 ? item.substr(0, 8) + '...' : item }}
+      </view>
+    </view>
   </view>
 </template>
 <script lang="ts">
@@ -16,10 +22,11 @@ import {
   watch,
   nextTick,
   onUnmounted,
-  onDeactivated
+  onDeactivated,
+  getCurrentInstance
 } from 'vue';
-import Taro from '@tarojs/taro';
 import { createComponent } from '../../utils/create';
+import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('barrage');
 
 export default create({
@@ -52,32 +59,30 @@ export default create({
   emits: ['click'],
 
   setup(props, { emit }) {
+    const timeId = ref(new Date().getTime());
+    const danmuList = ref<any[]>(props.danmu);
+    const rows = ref<number>(props.rows);
+    const top = ref<number>(props.top);
+    const speeds = props.speeds;
+
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
-        [prefixCls]: true
+        [prefixCls]: true,
+        ['dmBody' + timeId.value]: true
       };
     });
 
-    let timer: number = 0;
-    const danmuList = ref<any[]>(props.danmu);
-    const rows = ref<number>(props.rows);
-    const top = ref<number>(props.top);
-    const index = ref<number>(0);
-    const speeds = props.speeds;
-
     onMounted(() => {
-      run();
+      runStep();
     });
 
     onUnmounted(() => {
-      clearInterval(timer);
-      timer = 0;
+      danmuList.value = [];
     });
 
     onDeactivated(() => {
-      clearInterval(timer);
-      timer = 0;
+      danmuList.value = [];
     });
 
     watch(
@@ -88,60 +93,62 @@ export default create({
     );
 
     const add = (word: string) => {
-      const _index = index.value % danmuList.value.length;
-      danmuList.value.splice(_index, 0, word);
+      danmuList.value = [...danmuList.value, word];
+      runStep();
     };
 
-    const run = () => {
-      clearInterval(timer);
-      timer = 0;
-      timer = setInterval(() => {
-        play();
-        run();
-      }, props.frequency);
-    };
-
-    const play = () => {
+    const getNode = (index) => {
       const query = Taro.createSelectorQuery();
-      let dmContainer: any = document.getElementById('dmContainer');
-      const _index = props.loop
-        ? index.value % danmuList.value.length
-        : index.value;
-      let el: any = document.createElement(`view`);
-      el.innerHTML = danmuList.value[_index] as string;
-      el.classList.add('dmitem');
-      dmContainer.appendChild(el);
-
-      let domList: Array<any> = [];
-      query.selectAll('.dmitem').boundingClientRect((recs: any) => {
-        domList = recs;
-      });
-
-      nextTick(() => {
+      setTimeout(() => {
+        let width = 100;
+        query.select('.dmBody' + timeId.value).boundingClientRect((rec) => {
+          width = rec.width || 300;
+        });
         query
-          .select('.dmBody')
-          .boundingClientRect((rec) => {
-            let danmuCWidth = rec.width;
-            // let width = domList[_index]['width'];
-            let height = domList[_index]?.height || 0;
-            el.classList.add('move');
-            el.style.animationDuration = `${speeds}ms`;
-            el.style.top =
-              (_index % rows.value) * (height + top.value) + 20 + 'px';
-            // el.style.width = width + 20 + 'px';
-            el.style.width = 'auto';
-            // el.style.left = "-"+(_index % rows.value) + 'px';
-            el.style.setProperty('--move-distance', `-${danmuCWidth}px`);
-            el.dataset.index = `${_index}`;
-            el.addEventListener('animationend', () => {
-              dmContainer.removeChild(el);
-            });
-            index.value++;
+          .select('.dmitem' + index)
+          .boundingClientRect((recs: any) => {
+            let height = recs.height;
+            let nodeTop = (index % rows.value) * (height + top.value) + 20 + 'px';
+            styleInfo(index, nodeTop, width);
           })
           .exec();
+        // let ele = document.getElementsByClassName('dmitem'+index)[0];
+        // let transitionFlag = false;
+        // ele.addEventListener('animationend', (e:any) => {
+        //   if(e.target.id === e.currentTarget.id && transitionFlag) {
+        //     transitionFlag = false;
+        //     // deleteNode(index)
+        //   }else {
+        //     transitionFlag = true;
+        //   }
+        // }, false);
+      }, 500);
+    };
+
+    const runStep = () => {
+      danmuList.value.forEach((item, index) => {
+        getNode(index);
       });
     };
-    return { classes, danmuList, add };
+    let styleList = reactive([]);
+    const styleInfo = (index, nodeTop, width) => {
+      let n = Math.floor(Math.random() * (10 - 5)) + 5;
+      let timeIndex = index - rows.value > 0 ? index - rows.value : 0;
+      let list = styleList;
+      let time = list[timeIndex] ? Number(list[timeIndex]['--time']) : 0;
+
+      let obj = {
+        top: nodeTop,
+        '--time': `${props.frequency * index + time}`,
+        animationDuration: `${speeds}ms`,
+        animationIterationCount: `${props.loop ? 'infinite' : 1}`,
+        animationDelay: `${props.frequency * index + time}ms`,
+        '--move-distance': `-${width}px`
+      };
+      styleList.push(obj);
+    };
+
+    return { classes, danmuList, add, styleList };
   }
 });
 </script>

src/packages/__VUE/countup/demo.vue

@@ -3,26 +3,12 @@
     <h2>基础用法</h2>
     <div class="show-demo">
       <nut-countup :init-num="0" :end-num="200"></nut-countup>
-      <nut-countup
-        :init-num="150.0"
-        :end-num="0.0"
-        :speed="6.18"
-        :to-fixed="2"
-      ></nut-countup>
-      <nut-countup
-        :init-num="500.0"
-        :end-num="0.0"
-        :speed="17"
-        :to-fixed="2"
-      ></nut-countup>
+      <nut-countup :init-num="150.0" :end-num="0.0" :speed="6.18" :to-fixed="2"></nut-countup>
+      <nut-countup :init-num="500.0" :end-num="0.0" :speed="17" :to-fixed="2"></nut-countup>
     </div>
     <h2>数字滚动</h2>
     <div class="show-demo">
-      <nut-countup
-        :scrolling="true"
-        :init-num="17.618"
-        :during="600"
-      ></nut-countup>
+      <nut-countup :scrolling="true" :init-num="18.618" :end-num="18.618" :during="600"></nut-countup>
     </div>
     <h2>自定义滚动图片展示</h2>
     <div class="show-demo">
@@ -52,12 +38,8 @@
       >
       </nut-countup>
       <div class="btnBtn">
-        <nut-button type="danger" @click="startRole" :disabled="startFlag"
-          >抽奖</nut-button
-        >
-        <nut-button type="danger" @click="startRole2" :disabled="startFlag"
-          >不中奖</nut-button
-        >
+        <nut-button type="danger" @click="startRole" :disabled="startFlag">抽奖</nut-button>
+        <nut-button type="danger" @click="startRole2" :disabled="startFlag">不中奖</nut-button>
       </div>
     </div>
   </div>

src/packages/__VUE/countup/index.scss

@@ -9,7 +9,7 @@
   .run-number {
     display: inline-block;
     width: 100%;
-    margin: 0 auto;
+    // margin: 0 auto;
     padding: 0;
     overflow: hidden;
     // height: 50px;

src/packages/__VUE/countup/index.taro.vue

@@ -2,10 +2,7 @@
   <view class="nut-countup">
     <template v-if="customBgImg != ''">
       <template v-if="type == 'machine'">
-        <view
-          class="run-number-machine-img"
-          :style="{ height: numHeight + 'px' }"
-        >
+        <view class="run-number-machine-img" :style="{ height: numHeight + 'px' }">
           <view
             class="run-number-machine-img-li"
             ref="run-number-machine-img-li"
@@ -40,12 +37,7 @@
                 'px',
               backgroundImage: 'url(' + customBgImg + ')',
               backgroundPosition:
-                '0 ' +
-                -(
-                  String(relNum)[index] * numHeight +
-                  customSpacNum * String(relNum)[index]
-                ) +
-                'px',
+                '0 ' + -(String(relNum)[index] * numHeight + customSpacNum * String(relNum)[index]) + 'px',
               transition: 'all linear ' + during / 10 + 'ms'
             }"
           ></view>
@@ -67,7 +59,11 @@
       <view
         v-if="scrolling"
         class="run-number"
-        :style="{ height: numHeight + 'px', lineHeight: numHeight + 'px' }"
+        :style="{
+          width: numWidth * num_total_len + numWidth / 3 + 'px',
+          height: numHeight + 'px',
+          lineHeight: numHeight + 'px'
+        }"
       >
         <view
           ref="numberItem"
@@ -77,10 +73,7 @@
           :style="{
             all: turnNumber(index),
             top: topNumber(index),
-            left:
-              numWidth *
-                (index > num_total_len - pointNum - 1 ? index * 1.1 : index) +
-              'px'
+            left: numWidth * (index > num_total_len - pointNum - 1 ? index * 1.1 : index) + 'px'
           }"
           :turn-number="turnNumber(index)"
         >
@@ -117,15 +110,7 @@
   </view>
 </template>
 <script lang="ts">
-import {
-  reactive,
-  toRefs,
-  ref,
-  onMounted,
-  onUnmounted,
-  nextTick,
-  watch
-} from 'vue';
+import { reactive, toRefs, ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 import { useExtend } from '../../utils/useRelation/useRelation';
 const { componentName, create } = createComponent('countup');
@@ -324,13 +309,11 @@ export default create({
     const topNumber = (index: number) => {
       let { num_total_len, pointNum, initDigit1, initDigit2, sortFlag } = data;
       let idx1 =
-        sortFlag == 'add'
+        sortFlag == 'add' || sortFlag == 'equal'
           ? String(initDigit2)[index - (num_total_len - pointNum)]
           : 10 - Number(String(initDigit2)[index - (num_total_len - pointNum)]);
       let idx2 =
-        sortFlag == 'add'
-          ? String(initDigit1)[index]
-          : 10 - Number(String(initDigit1)[index]);
+        sortFlag == 'add' || sortFlag == 'equal' ? String(initDigit1)[index] : 10 - Number(String(initDigit1)[index]);
       let num =
         index > num_total_len - pointNum - 1
           ? -idx1 * 100 + '%'
@@ -369,11 +352,7 @@ export default create({
             emit('scroll-end');
             data.valFlag = false;
           } else {
-            data.current = Number(
-              (
-                parseFloat(String(data.current)) - parseFloat(String(speed))
-              ).toFixed(toFixed)
-            );
+            data.current = Number((parseFloat(String(data.current)) - parseFloat(String(speed))).toFixed(toFixed));
           }
         } else {
           //增加
@@ -383,11 +362,7 @@ export default create({
             emit('scroll-end');
             data.valFlag = false;
           } else {
-            data.current = Number(
-              (
-                parseFloat(String(data.current)) + parseFloat(String(speed))
-              ).toFixed(toFixed)
-            );
+            data.current = Number((parseFloat(String(data.current)) + parseFloat(String(speed))).toFixed(toFixed));
           }
         }
       }, props.during);
@@ -442,12 +417,14 @@ export default create({
         data.to0_10 = [0, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
         data.totalCount = calculation(initNum, endNum, '-');
         data.numberVal = Number(String(initNum));
-      } else {
+      } else if (initNum < endNum) {
         //增加
         data.sortFlag = 'add';
         data.to0_10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
         data.totalCount = calculation(endNum, initNum, '-');
         data.numberVal = Number(String(endNum));
+      } else {
+        data.sortFlag = 'equal';
       }
       //将小数位数计算后，补0
       var unit = 1;
@@ -459,9 +436,7 @@ export default create({
       // this.totalCount = rel_big;
       if (toFixed != 0) {
         //计算小数点后的位数，小数位
-        data.pointNum = String(data.numberVal).split('.')[1]
-          ? String(data.numberVal).split('.')[1].length
-          : 0;
+        data.pointNum = String(data.numberVal).split('.')[1] ? String(data.numberVal).split('.')[1].length : 0;
         //数字长度
         data.num_total_len = String(rel_big).length;
       }
@@ -476,8 +451,10 @@ export default create({
       if (scrolling && !customBgImg) {
         // 数字都是从小加到大的，所以我们循环转动最后一个数字，传入最后一个数字的DOM
         nextTick(() => {
-          let refsDom: HTMLCollectionOf<Element> =
-            document.getElementsByClassName('numberItem');
+          if (data.sortFlag == 'equal') {
+            return false;
+          }
+          let refsDom: HTMLCollectionOf<Element> = document.getElementsByClassName('numberItem');
           let element = refsDom[data.num_total_len - 1];
           runTurn(element);
         });
@@ -513,28 +490,19 @@ export default create({
       if (data.sortFlag == 'add') {
         turningNum = parseInt(String(currentTurn)) + 1;
       } else {
-        turningNum =
-          parseInt(String(currentTurn)) - 1 >= 0
-            ? parseInt(String(currentTurn)) - 1
-            : 9;
+        turningNum = parseInt(String(currentTurn)) - 1 >= 0 ? parseInt(String(currentTurn)) - 1 : 9;
       }
       // el.setAttribute('turn-number', String(turningNum));
       el.style.all = String(turningNum);
 
-      if (
-        el.style.transition == 'none' ||
-        turningNum == 1 ||
-        !el.style.transition
-      ) {
+      if (el.style.transition == 'none' || turningNum == 1 || !el.style.transition) {
         el.style.transition = `all linear ${props.during}ms`;
       }
 
       if (turningNum == 10 || (data.sortFlag == 'reduce' && turningNum == 0)) {
         var timeOut: any = null;
         // el.style.top = `-${turningNum * 100}%`;
-        el.style.top = `-${
-          data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100
-        }%`;
+        el.style.top = `-${data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100}%`;
         // el.setAttribute('turn-number', '0');
         el.style.all = '0';
         timeOut = setTimeout(() => {
@@ -550,9 +518,7 @@ export default create({
         }, 0.975 * props.during);
       } else {
         // el.style.top = `-${(10-turningNum)*100}%`;
-        el.style.top = `-${
-          data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100
-        }%`;
+        el.style.top = `-${data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100}%`;
       }
       // 用于递减的时候
       if (el.style.top == '-100%' && data.sortFlag == 'reduce') {
@@ -583,9 +549,7 @@ export default create({
     const generateRandom = () => {
       data.notPrize = [];
       while (data.notPrize.length < 3) {
-        var rand: number = Math.floor(
-          Math.random() * props.machinePrizeNum + 1
-        );
+        var rand: number = Math.floor(Math.random() * props.machinePrizeNum + 1);
         if (data.notPrize.indexOf(rand) == -1) {
           data.notPrize.push(rand);
         }
@@ -593,8 +557,7 @@ export default create({
     };
     // 抽奖
     const machineLuck = () => {
-      const machineTrunMoreNum =
-        props.machineTrunMore < 0 ? 0 : props.machineTrunMore;
+      const machineTrunMoreNum = props.machineTrunMore < 0 ? 0 : props.machineTrunMore;
       let distance = props.numHeight * props.machinePrizeNum; // 所有奖品的高度，雪碧图的高度
       if (data.prizeLevelTrun < 0) {
         generateRandom();
@@ -602,8 +565,7 @@ export default create({
 
       for (let i = 0; i < props.machineNum; i++) {
         setTimeout(() => {
-          let turn =
-            distance * (i + 1 + parseFloat(String(machineTrunMoreNum)));
+          let turn = distance * (i + 1 + parseFloat(String(machineTrunMoreNum)));
           if (data.prizeYPrev.length != 0) {
             // this.machineTransition = 'none';
             // console.log(this.prizeYPrev[i]-(this.numHeight * this.machinePrizeNum));
@@ -612,11 +574,7 @@ export default create({
           }
           let local = data.prizeYPrev[i] ? data.prizeYPrev[i] : 0;
           let newLocation =
-            turn +
-            local +
-            (props.machinePrizeNum - data.prizeLevelTrun + 1) *
-              props.numHeight +
-            (distance - local);
+            turn + local + (props.machinePrizeNum - data.prizeLevelTrun + 1) * props.numHeight + (distance - local);
           if (data.prizeLevelTrun < 0) {
             newLocation += props.numHeight * data.notPrize[i];
           }

src/packages/__VUE/countup/index.vue

@@ -2,10 +2,7 @@
   <view class="nut-countup">
     <template v-if="customBgImg != ''">
       <template v-if="type == 'machine'">
-        <view
-          class="run-number-machine-img"
-          :style="{ height: numHeight + 'px' }"
-        >
+        <view class="run-number-machine-img" :style="{ height: numHeight + 'px' }">
           <view
             class="run-number-machine-img-li"
             ref="run-number-machine-img-li"
@@ -40,12 +37,7 @@
                 'px',
               backgroundImage: 'url(' + customBgImg + ')',
               backgroundPosition:
-                '0 ' +
-                -(
-                  String(relNum)[index] * numHeight +
-                  customSpacNum * String(relNum)[index]
-                ) +
-                'px',
+                '0 ' + -(String(relNum)[index] * numHeight + customSpacNum * String(relNum)[index]) + 'px',
               transition: 'all linear ' + during / 10 + 'ms'
             }"
           ></view>
@@ -67,7 +59,11 @@
       <view
         v-if="scrolling"
         class="run-number"
-        :style="{ height: numHeight + 'px', lineHeight: numHeight + 'px' }"
+        :style="{
+          width: numWidth * num_total_len + numWidth / 3 + 'px',
+          height: numHeight + 'px',
+          lineHeight: numHeight + 'px'
+        }"
       >
         <view
           ref="numberItem"
@@ -76,10 +72,7 @@
           :key="val"
           :style="{
             top: topNumber(index),
-            left:
-              numWidth *
-                (index > num_total_len - pointNum - 1 ? index * 1.1 : index) +
-              'px'
+            left: numWidth * (index > num_total_len - pointNum - 1 ? index * 1.1 : index) + 'px'
           }"
           :turn-number="turnNumber(index)"
         >
@@ -116,15 +109,7 @@
   </view>
 </template>
 <script lang="ts">
-import {
-  reactive,
-  toRefs,
-  ref,
-  onMounted,
-  onUnmounted,
-  nextTick,
-  watch
-} from 'vue';
+import { reactive, toRefs, ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 import { useExtend } from '../../utils/useRelation/useRelation';
 const { componentName, create } = createComponent('countup');
@@ -323,13 +308,11 @@ export default create({
     const topNumber = (index: number) => {
       let { num_total_len, pointNum, initDigit1, initDigit2, sortFlag } = data;
       let idx1 =
-        sortFlag == 'add'
+        sortFlag == 'add' || sortFlag == 'equal'
           ? String(initDigit2)[index - (num_total_len - pointNum)]
           : 10 - Number(String(initDigit2)[index - (num_total_len - pointNum)]);
       let idx2 =
-        sortFlag == 'add'
-          ? String(initDigit1)[index]
-          : 10 - Number(String(initDigit1)[index]);
+        sortFlag == 'add' || sortFlag == 'equal' ? String(initDigit1)[index] : 10 - Number(String(initDigit1)[index]);
       let num =
         index > num_total_len - pointNum - 1
           ? -idx1 * 100 + '%'
@@ -368,11 +351,7 @@ export default create({
             emit('scroll-end');
             data.valFlag = false;
           } else {
-            data.current = Number(
-              (
-                parseFloat(String(data.current)) - parseFloat(String(speed))
-              ).toFixed(toFixed)
-            );
+            data.current = Number((parseFloat(String(data.current)) - parseFloat(String(speed))).toFixed(toFixed));
           }
         } else {
           //增加
@@ -382,11 +361,7 @@ export default create({
             emit('scroll-end');
             data.valFlag = false;
           } else {
-            data.current = Number(
-              (
-                parseFloat(String(data.current)) + parseFloat(String(speed))
-              ).toFixed(toFixed)
-            );
+            data.current = Number((parseFloat(String(data.current)) + parseFloat(String(speed))).toFixed(toFixed));
           }
         }
       }, props.during);
@@ -441,12 +416,14 @@ export default create({
         data.to0_10 = [0, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
         data.totalCount = calculation(initNum, endNum, '-');
         data.numberVal = Number(String(initNum));
-      } else {
+      } else if (initNum < endNum) {
         //增加
         data.sortFlag = 'add';
         data.to0_10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
         data.totalCount = calculation(endNum, initNum, '-');
         data.numberVal = Number(String(endNum));
+      } else {
+        data.sortFlag = 'equal';
       }
       //将小数位数计算后，补0
       var unit = 1;
@@ -458,9 +435,7 @@ export default create({
       // this.totalCount = rel_big;
       if (toFixed != 0) {
         //计算小数点后的位数，小数位
-        data.pointNum = String(data.numberVal).split('.')[1]
-          ? String(data.numberVal).split('.')[1].length
-          : 0;
+        data.pointNum = String(data.numberVal).split('.')[1] ? String(data.numberVal).split('.')[1].length : 0;
         //数字长度
         data.num_total_len = String(rel_big).length;
       }
@@ -475,8 +450,10 @@ export default create({
       if (scrolling && !customBgImg) {
         // 数字都是从小加到大的，所以我们循环转动最后一个数字，传入最后一个数字的DOM
         nextTick(() => {
-          let refsDom: HTMLCollectionOf<Element> =
-            document.getElementsByClassName('numberItem');
+          if (data.sortFlag == 'equal') {
+            return false;
+          }
+          let refsDom: HTMLCollectionOf<Element> = document.getElementsByClassName('numberItem');
           let element = refsDom[data.num_total_len - 1];
           runTurn(element);
         });
@@ -511,25 +488,16 @@ export default create({
       if (data.sortFlag == 'add') {
         turningNum = parseInt(String(currentTurn)) + 1;
       } else {
-        turningNum =
-          parseInt(String(currentTurn)) - 1 >= 0
-            ? parseInt(String(currentTurn)) - 1
-            : 9;
+        turningNum = parseInt(String(currentTurn)) - 1 >= 0 ? parseInt(String(currentTurn)) - 1 : 9;
       }
       el.setAttribute('turn-number', String(turningNum));
-      if (
-        el.style.transition == 'none 0s ease 0s' ||
-        turningNum == 1 ||
-        !el.style.transition
-      ) {
+      if (el.style.transition == 'none 0s ease 0s' || turningNum == 1 || !el.style.transition) {
         el.style.transition = `all linear ${props.during}ms`;
       }
       if (turningNum == 10 || (data.sortFlag == 'reduce' && turningNum == 0)) {
         var timeOut: any = null;
         // el.style.top = `-${turningNum * 100}%`;
-        el.style.top = `-${
-          data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100
-        }%`;
+        el.style.top = `-${data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100}%`;
         el.setAttribute('turn-number', '0');
         timeOut = setTimeout(() => {
           timeOut && clearTimeout(timeOut);
@@ -544,9 +512,7 @@ export default create({
         }, 0.975 * props.during);
       } else {
         // el.style.top = `-${(10-turningNum)*100}%`;
-        el.style.top = `-${
-          data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100
-        }%`;
+        el.style.top = `-${data.sortFlag == 'add' ? turningNum * 100 : (10 - turningNum) * 100}%`;
       }
       // 用于递减的时候
       if (el.style.top == '-100%' && data.sortFlag == 'reduce') {
@@ -577,9 +543,7 @@ export default create({
     const generateRandom = () => {
       data.notPrize = [];
       while (data.notPrize.length < 3) {
-        var rand: number = Math.floor(
-          Math.random() * props.machinePrizeNum + 1
-        );
+        var rand: number = Math.floor(Math.random() * props.machinePrizeNum + 1);
         if (data.notPrize.indexOf(rand) == -1) {
           data.notPrize.push(rand);
         }
@@ -587,16 +551,14 @@ export default create({
     };
     // 抽奖
     const machineLuck = () => {
-      const machineTrunMoreNum =
-        props.machineTrunMore < 0 ? 0 : props.machineTrunMore;
+      const machineTrunMoreNum = props.machineTrunMore < 0 ? 0 : props.machineTrunMore;
       let distance = props.numHeight * props.machinePrizeNum; // 所有奖品的高度，雪碧图的高度
       if (data.prizeLevelTrun < 0) {
         generateRandom();
       }
       for (let i = 0; i < props.machineNum; i++) {
         setTimeout(() => {
-          let turn =
-            distance * (i + 1 + parseFloat(String(machineTrunMoreNum)));
+          let turn = distance * (i + 1 + parseFloat(String(machineTrunMoreNum)));
           if (data.prizeYPrev.length != 0) {
             // this.machineTransition = 'none';
             // console.log(this.prizeYPrev[i]-(this.numHeight * this.machinePrizeNum));
@@ -605,11 +567,7 @@ export default create({
           }
           let local = data.prizeYPrev[i] ? data.prizeYPrev[i] : 0;
           let newLocation =
-            turn +
-            local +
-            (props.machinePrizeNum - data.prizeLevelTrun + 1) *
-              props.numHeight +
-            (distance - local);
+            turn + local + (props.machinePrizeNum - data.prizeLevelTrun + 1) * props.numHeight + (distance - local);
           if (data.prizeLevelTrun < 0) {
             newLocation += props.numHeight * data.notPrize[i];
           }

src/sites/mobile-taro/vue/src/business/pages/barrage/index.vue

@@ -5,9 +5,7 @@
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
     <div class="test">
-      <button @click="addDanmu" class="add nut-button--primary"
-        >随机添加</button
-      >
+      <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
     </div>
   </div>
 </template>
@@ -19,14 +17,7 @@ export default {
   setup() {
     const inputVal = ref<any>('');
     const danmu = ref<any>(null);
-    let list = ref([
-      '画美不看',
-      '不明觉厉',
-      '喜大普奔',
-      '男默女泪',
-      '累觉不爱',
-      '爷青结'
-    ]);
+    let list = ref(['画美不看画美不看画美不看画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
     function addDanmu() {
       let n = Math.random();
       danmu.value.add('随机——' + String(n).substr(2, 10));

src/sites/mobile-taro/vue/src/dentry/pages/countup/index.vue

@@ -3,26 +3,12 @@
     <h2>基础用法</h2>
     <div class="show-demo">
       <nut-countup :init-num="0" :end-num="200"></nut-countup>
-      <nut-countup
-        :init-num="150.0"
-        :end-num="0.0"
-        :speed="6.18"
-        :to-fixed="2"
-      ></nut-countup>
-      <nut-countup
-        :init-num="500.0"
-        :end-num="0.0"
-        :speed="17"
-        :to-fixed="2"
-      ></nut-countup>
+      <nut-countup :init-num="150.0" :end-num="0.0" :speed="6.18" :to-fixed="2"></nut-countup>
+      <nut-countup :init-num="500.0" :end-num="0.0" :speed="17" :to-fixed="2"></nut-countup>
     </div>
     <h2>数字滚动</h2>
     <div class="show-demo">
-      <nut-countup
-        :scrolling="true"
-        :init-num="17.618"
-        :during="600"
-      ></nut-countup>
+      <nut-countup :scrolling="true" :init-num="18.618" :during="600"></nut-countup>
     </div>
     <h2>自定义滚动图片展示</h2>
     <div class="show-demo">
@@ -52,12 +38,8 @@
       >
       </nut-countup>
       <div class="btnBtn">
-        <nut-button type="danger" @click="startRole" :disabled="startFlag"
-          >抽奖</nut-button
-        >
-        <nut-button type="danger" @click="startRole2" :disabled="startFlag"
-          >不中奖</nut-button
-        >
+        <nut-button type="danger" @click="startRole" :disabled="startFlag">抽奖</nut-button>
+        <nut-button type="danger" @click="startRole2" :disabled="startFlag">不中奖</nut-button>
       </div>
     </div>
   </div>