zhenyulei 7 years ago
parent
commit
4cb269b046
4 changed files with 19 additions and 30 deletions
  1. BIN
      src/asset/img/demo/count_up.gif
  2. 2 14
      src/demo/countup.vue
  3. 7 8
      src/package/countup/src/countup.vue
  4. 10 8
      src/view/countup.vue

BIN
src/asset/img/demo/count_up.gif


+ 2 - 14
src/demo/countup.vue

@@ -5,10 +5,11 @@
         :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>
-        <button  class="countup-btn" v-on:click='changeNum'>点击我触发数字滚动</button>
+        <a class="button button-primary" href="javascript:;" @click="changeNum">点击触发数字滚动</a>
         <!-- DEMO区域 -->
     </div>
 </template>
@@ -29,17 +30,4 @@ export default {
 </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>

+ 7 - 8
src/package/countup/src/countup.vue

@@ -49,13 +49,10 @@ export default {
     },
     methods: {
     	countChange(){
-    		let endNum = this.endNum;
-    		let initNum = this.initNum;
-    		let speed = this.speed;
-    		let toFixed = this.toFixed;
+            let {endNum, initNum, speed, toFixed} = this;
     		let countTimer = setInterval(()=>{
     			if(initNum > endNum){//减少
-    				if(this.current <= endNum || this.current <= speed){
+    				if(this.current <= endNum || this.current <= speed){//数字减小,有可能导致current小于speed
 	    				this.current = endNum.toFixed(toFixed);
 	    				clearInterval(countTimer);
 					}else{
@@ -76,11 +73,13 @@ export default {
 </script>
 <style lang="scss">
 .nut-countup{
-	color:#96C40F;
+    display:inline-block;
+    padding:5px;
+	color:red;
 	font-size:0.8rem;
 	font-weight:bold;
 	text-align:center;
-	height:1.6rem;
-	line-height:1.6rem;
+    margin-bottom:10px;
+    border-radius:6px;
 }
 </style>

+ 10 - 8
src/view/countup.vue

@@ -69,18 +69,20 @@ export default {
     data(){
         return{
             demo1:
-        `<nut-countup :initNum='0' :endNum='200'>
+`<nut-countup :initNum='0' :endNum='200'>
 </nut-countup>
+
 <nut-countup :initNum='150.00' 
-        :endNum='0.00' 
-        :speed='2.62' 
-        :toFixed='2'>
+: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'>
+:endNum='0.00'
+:speed='6.3'  
+:startFlag='startNum'
+:toFixed='2'>
 </nut-countup>`
         }
     },