update

config.json

@@ -245,7 +245,7 @@
       "name": "Handle",
       "chnName": "工具函数",
       "type": "filter",
-      "showDemo":false,
+      "showDemo": false,
       "desc": "工具函数。"
     },
     {
@@ -306,6 +306,13 @@
       "desc": "进度条",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "CountUp",
+      "chnName": "数字滚动组件",
+      "desc": "可用于数字滚动变化",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

src/demo/countup.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <!-- 组件名和描述 -->
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <nut-countup :initNum='0' :endNum='200'></nut-countup>
+        <nut-countup :initNum='150.00' :endNum='0.00' :speed='2.62' :toFixed='2'></nut-countup>
+        <hr/>
+        <nut-countup :initNum='1000.00' :endNum='0.00' :speed='6.3'  :startFlag='startNum' :toFixed='2'></nut-countup>
+        <button  class="countup-btn" v-on:click='changeNum'>点击我触发数字滚动</button>
+        <!-- DEMO区域 -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            startNum:false,
+        }
+    },
+    methods:{
+        changeNum(){
+            this.startNum =true;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .countup-btn{
+        display: block;
+        width:4rem;
+        height:1rem;
+        line-height:1rem;
+        color:#fff;
+        background:#96C40F;
+        border:0;
+        border-radius: 5px;
+        margin: 0 auto;
+        font-size: 0.36rem;
+        letter-spacing: 1px;
+    }
+</style>

src/package/countup/index.js

@@ -0,0 +1,7 @@
+import CountUp from './src/countup.vue';
+
+CountUp.install = function(Vue) {
+  Vue.component(CountUp.name, CountUp);
+};
+
+export default CountUp

src/package/countup/src/countup.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="nut-countup">{{current}}</div>
+</template>
+<script>
+export default {
+    name:'nut-countup',
+    props: {
+    	'initNum':{
+            type:Number,
+            required:true,
+        },
+        'endNum':{
+        	type:Number,
+            required:true,
+        },
+        'speed':{
+        	type:Number,
+            default:2,
+        },
+        'toFixed':{
+        	type:Number,
+            default:0,
+        },
+        'during':{
+        	type:Number,
+            default:200,
+        },
+        'startFlag':{
+        	type:Boolean,
+            default:true,
+        }
+    },
+    data() {
+        return {
+        	current:this.initNum,
+        };
+    },
+    mounted(){
+    	if(this.startFlag){
+	    	this.countChange();
+	    }
+    },
+    watch:{
+    	startFlag:function(){
+    		if(this.startFlag){
+	    		this.countChange();
+	    	}
+    	}
+    },
+    methods: {
+    	countChange(){
+    		let endNum = this.endNum;
+    		let initNum = this.initNum;
+    		let speed = this.speed;
+    		let toFixed = this.toFixed;
+    		let countTimer = setInterval(()=>{
+    			if(initNum > endNum){//减少
+    				if(this.current <= endNum || this.current <= speed){
+	    				this.current = endNum.toFixed(toFixed);
+	    				clearInterval(countTimer);
+					}else{
+                        this.current = (parseFloat(this.current) - parseFloat(speed)).toFixed(toFixed);
+					}
+    			}else{//增加
+    				if(this.current >= endNum){
+    					this.current = endNum.toFixed(toFixed);
+	    				clearInterval(countTimer);
+    				}else{
+    					this.current = (parseFloat(this.current) + parseFloat(speed)).toFixed(toFixed);
+    				}
+    			}
+    		},this.during);
+    	}
+    }
+}
+</script>
+<style lang="scss">
+.nut-countup{
+	color:#96C40F;
+	font-size:0.8rem;
+	font-weight:bold;
+	text-align:center;
+	height:1.6rem;
+	line-height:1.6rem;
+}
+</style>

src/view/countup.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+       <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Filter" 
+        desc=""
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1" imgUrl="../asset/img/demo/count_up.gif"></nut-codebox>
+
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>参数</th>
+                <th>说明</th>
+                <th>类型</th>
+                <th>默认值</th>
+                <th>可选值</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td>initNum</td>
+                <td>初始数字，必填项</td>
+                <td>Number</td>
+                <td>--</td>
+                <td>--</td>
+                </tr>
+                <tr>
+                <td>endNum</td>
+                <td>结束数字，必填项</td>
+                <td>Number</td>
+                <td>--</td>
+                <td>--</td>
+                </tr>
+                <tr>
+                <td>speed</td>
+                <td>间隔数字</td>
+                <td>Number</td>
+                <td>2</td>
+                <td>--</td>
+                </tr>
+                <tr>
+                <td>toFixed</td>
+                <td>保留小数点后几位</td>
+                <td>Number</td>
+                <td>0</td>
+                <td>0/1/2/3</td>
+                </tr>
+                <tr>
+                <td>startFlag</td>
+                <td>外界触发数字开始滚动,若不想加载页面时数字滚动，可设置为false</td>
+                <td>Boolean</td>
+                <td>true</td>
+                <td>true/false</td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:
+        `<nut-countup :initNum='0' :endNum='200'>
+</nut-countup>
+<nut-countup :initNum='150.00' 
+        :endNum='0.00' 
+        :speed='2.62' 
+        :toFixed='2'>
+</nut-countup>
+<nut-countup :initNum='1000.00' 
+        :endNum='0.00' 
+        :speed='6.3' 
+        :startNum='startNum' 
+        :toFixed='2'>
+</nut-countup>`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>