vue使用countTo插件实现字体动态滚动

vue+vue-countTo实现字体滚动以及闪烁特效

1、安装countTo插件

npm install vue-count-to

2、使用

<template>
  <div  class="example">
  余额：<countTo  :startVal='startVal' :endVal='endVal' :duration='2000' prefix='￥'></countTo>
</div>
</template>

countTo参数：
Property Description type default
startVal 开始值 Number 0
endVal 结束值 Number 2017
duration 持续时间，以毫秒为单位 Number 3000
autoplay 自动播放 Boolean true
decimals 要显示的小数位数 Number 0
decimal 十进制分割 String .
separator 分隔符 String ,
prefix 前缀 String ‘’
suffix 后缀 String ‘’
useEasing 使用缓和功能 Boolean true
easingFn 缓和回调 Function —
3、在method中请求数据返回前端并给endVal重新赋值

<script>
  import axios from 'axios'
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 0
      }
    },
    created() {
    this.fetchData()
  }, methods: {
    fetchData(){
    
      const that = this
      axios.get('http://192.168.56.1:8080/api/selMoneyByUserid/1').then((res) =>{
        console.log(res.data.data )
        that.endVal = res.data.money
        
            })
    }
  }
  }
</script>

4、设计字体颜色如下

<style scoped>
 .example{
   
  width: 300px;
    height: 200px;
    left: 50%;
    margin-left: 500px;
    background-image: -webkit-linear-gradient(left,rgba(33, 14, 119, 0.5),#4d8888 10%,#b3a20f9f 20%,#545e5f 30%, #CCCCFF 40%, #16d17a 50%,#3232b8 60%,#11110f 70%,#12ad39 80%,#177070 90%,rgb(37, 37, 75) 100%);
    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    background-clip: text;
    -webkit-background-size: 200% 100%; 
    background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
    animation:  masked-animation 4s linear infinite;
    font-size: 35px;
 }
 @keyframes masked-animation {
    0% {
        background-position: 0  0;
    }
    100% {
        background-position: -100%  0;
    }
 }
</style>

问题、
关于vue中使用scoped属性:
在vue组件中，在style标签中添加scoped属性，这样在这里定义的css只作用于当前组件中的元素，可使组件之间的样式不会相互污染，使样式私有化。比如在父组件内使用子组件，父组件的样式不会渗透到子组件中。