首页 前端知识 数字滚动插件‘vue-count-to’应用详解

数字滚动插件‘vue-count-to’应用详解

2024-06-01 10:06:19 前端知识 前端哥 780 366 我要收藏

一、使用npm安装

npm install vue-count-to

二、在需要使用的页面中引用vue-count-to

下面是全部代码

<template>
    <div>
        <countTo
        :startVal="startVal"
        :endVal="endVal"
        :duration="duration"
        :autoplay="autoplay"
        :decimals="decimals"
        :decimal="decimal"
        :separator="separator"
        :prefix="prefix"
        :suffix="suffix"
        :useEasing="useEasing"
        >
        </countTo>
    </div>
</template>

<script>
      import countTo from 'vue-count-to'
    
      export default{
        components: {
          countTo
        },
        data(){
          return{
            startVal: 0, // 开始值
            endVal: 1000, // 结束值
            duration: 3000, // 持续时间,毫秒
            autoplay: false, // 是否自动播放
            decimals: 0, // 要显示的小数位数
            decimal: '.' , // 十进制分隔符
            separator: ',' , // 分隔符
            prefix: '' , // 前缀
            suffix: '' , // 后缀
            useEasing: true , // 使用缓和功能
          }
        },
        methods: {
         
        }
      }
</script>

三、 vue-count-to配置项

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10418.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!