浏览代码

fix: countup props,emit

yumingming11 5 年之前
父节点
当前提交
d525c1e775
共有 3 个文件被更改,包括 35 次插入35 次删除
  1. 4 4
      src/packages/countup/countup.vue
  2. 13 13
      src/packages/countup/demo.vue
  3. 18 18
      src/packages/countup/doc.md

+ 4 - 4
src/packages/countup/countup.vue

@@ -187,7 +187,7 @@ export default {
     				if(this.current <= endNum || this.current <= speed){//数字减小,有可能导致current小于speed
 	    				this.current = endNum.toFixed(toFixed);
                         clearInterval(countTimer);
-                        this.$emit('scrollEnd');
+                        this.$emit('scroll-end');
 					}else{
                         this.current = (parseFloat(this.current) - parseFloat(speed)).toFixed(toFixed);
 					}
@@ -195,7 +195,7 @@ export default {
     				if(this.current >= endNum){
     					this.current = endNum.toFixed(toFixed);
                         clearInterval(countTimer);
-                        this.$emit('scrollEnd');
+                        this.$emit('scroll-end');
     				}else{
     					this.current = (parseFloat(this.current) + parseFloat(speed)).toFixed(toFixed);
     				}
@@ -327,7 +327,7 @@ export default {
                 // that.totalCount--;
                 if(that.totalCount <= 0) {
                     that.clearInterval();
-                    this.$emit('scrollEnd');
+                    this.$emit('scroll-end');
                 }
             }, that.during);
         },
@@ -388,7 +388,7 @@ export default {
                     that.relNum = that.calculation(that.relNum, m * that.speed, '+');
                 }, that.during)
                 f.addEventListener('webkitTransitionEnd', () => {
-                    this.$emit('scrollEnd');
+                    this.$emit('scroll-end');
                     setTimeout(() => {
                         that.relNum = that.calculation(that.relNum, m * that.speed, '+');
                     }, that.during);

+ 13 - 13
src/packages/countup/demo.vue

@@ -2,34 +2,34 @@
     <div class="demo-list">
       <h4>基本用法</h4>
       <div class="show-demo">
-        <nut-countup :initNum='0' :endNum='200'></nut-countup>
+        <nut-countup :init-num='0' :end-num='200'></nut-countup>
 
         <nut-countup
-        :initNum='150.00' 
-        :endNum='0.00' 
+        :init-num='150.00' 
+        :end-num='0.00' 
         :speed='6.18' 
-        :toFixed='2'>
+        :to-fixed='2'>
         </nut-countup>
 
-        <nut-countup :initNum='1000.00' 
-        :endNum='0.00'
+        <nut-countup :init-num='1000.00' 
+        :end-num='0.00'
         :speed='17'  
-        :toFixed='2'>
+        :to-fixed='2'>
         </nut-countup>
       </div>
       <h4>数字滚动</h4>
       <div class="show-demo">
-        <nut-countup :scrolling="true" :initNum='17.618' :during="600">
+        <nut-countup :scrolling="true" :init-num='17.618' :during="600">
         </nut-countup>
       </div>
       <h4>自定义滚动图片展示</h4>
       <div class="show-demo">
         <nut-countup
-          :customChangeNum="customNumber"
-          :customBgImg="bgImage"
-          :customSpacNum="11"
-          :numWidth="33"
-          :numHeight="47"
+          :custom-change-num="customNumber"
+          :custom-bg-img="bgImage"
+          :custom-spac-num="11"
+          :num-width="33"
+          :num-height="47"
           :during="5000"
         >
         </nut-countup>

+ 18 - 18
src/packages/countup/doc.md

@@ -3,28 +3,28 @@
 ## 基本用法
 
 ```html
-<nut-countup :initNum='0' :endNum='200'></nut-countup>
+<nut-countup :init-num='0' :end-num='200'></nut-countup>
 
-<nut-countup :initNum='150.00' :endNum='0.00' :speed='2.62' :toFixed='2'></nut-countup>
+<nut-countup :init-num='150.00' :end-num='0.00' :speed='2.62' :to-fixed='2'></nut-countup>
 
-<nut-countup :initNum='1000.00' :endNum='0.00' :speed='6.3' :startFlag='startNum' :toFixed='2'></nut-countup>
+<nut-countup :init-num='1000.00' :end-num='0.00' :speed='6.3' :start-flag='startNum' :to-fixed='2'></nut-countup>
 ```
 
 ## 数字滚动
 
 ```html
-<nut-countup :scrolling="true" :initNum='17.618' :during="600"></nut-countup>
+<nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>
 ```
 
 ## 自定义数字图片展示
 
 ```html
 <nut-countup
-    :customChangeNum="customNumber"
-    :customBgImg="bgImage"
-    :customSpacNum="11"
-    :numWidth="33"
-    :numHeight="47"
+    :custom-change-num="customNumber"
+    :custom-bg-img="bgImage"
+    :custom-spac-num="11"
+    :num-width="33"
+    :num-height="47"
     :during="5000"
 >
 </nut-countup>
@@ -56,19 +56,19 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| initNum | 初始数字 | Number | 0
-| endNum | 结束数字 | Number | 0
+| init-num | 初始数字 | Number | 0
+| end-num | 结束数字 | Number | 0
 | speed | 间隔数字,目前仅支持基本用法 | Number | 1
-| toFixed | 保留小数点后几位 | Number | 以传入的数字为准
-| startFlag | 触发数字滚动的标识 | Boolean | true
+| to-fixed | 保留小数点后几位 | Number | 以传入的数字为准
+| start-flag | 触发数字滚动的标识 | Boolean | true
 | during | 滚动一次运行时间 | Number | 1000
-| numWidth | 数字宽度,常用于自定义无缝滚动 | Number | 20
-| numHeight | 数字高度,常用于自定义无缝滚动 | Number | 20
+| num-width | 数字宽度,常用于自定义无缝滚动 | Number | 20
+| num-height | 数字高度,常用于自定义无缝滚动 | Number | 20
 | scrolling | 用于数字滚动展示 | Boolean | false
 | custom | 用于自定义图片数字滚动 | Boolean | false
-| customChangeNum | 要变化的数字(用于自定义图片,initNum\endNum在此无效) | Number | 1
-| customBgImg | 自定义图片(建议使用雪碧图实现) | - | -
-| customSpacNum | 图片中数字之间可能会存在间距 | Number | 0
+| custom-change-num | 要变化的数字(用于自定义图片,initNum\endNum在此无效) | Number | 1
+| custom-bg-img | 自定义图片(建议使用雪碧图实现) | - | -
+| custom-spac-num | 图片中数字之间可能会存在间距 | Number | 0