模块懒加载

config.json

@@ -310,7 +310,14 @@
     {
       "name": "LazyComponent",
       "chnName": "组件懒加载",
-      "desc": "用来实现组件的懒加载",
+      "desc": "用来实现组件的懒加载",      
+      "type": "component",
+      "showDemo": true
+    },
+    {      
+      "name": "CountUp",
+      "chnName": "数字滚动组件",
+      "desc": "可用于数字滚动变化",
       "type": "component",
       "showDemo": true
     }

src/demo/countup.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <!-- 组件名和描述 -->
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <nut-countup :initNum='0' :endNum='200'></nut-countup>
+        <br/>
+        <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>
+        <a class="button button-primary" href="javascript:;" @click="changeNum">点击触发数字滚动</a>
+        <!-- DEMO区域 -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            startNum:false,
+        }
+    },
+    methods:{
+        changeNum(){
+            this.startNum =true;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+</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,85 @@
+<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, initNum, speed, toFixed} = this;
+    		let countTimer = setInterval(()=>{
+    			if(initNum > endNum){//减少
+    				if(this.current <= endNum || this.current <= speed){//数字减小，有可能导致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{
+    display:inline-block;
+    padding:5px;
+	color:red;
+	font-size:0.8rem;
+	font-weight:bold;
+	text-align:center;
+    margin-bottom:10px;
+    border-radius:6px;
+}
+</style>

src/view/countup.vue

@@ -0,0 +1,95 @@
+<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'  
+:startFlag='startNum'
+:toFixed='2'>
+</nut-countup>`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>