vue-countTo---简单好用的一个数字滚动插件
2022/4/7 6:49:01
本文主要是介绍vue-countTo---简单好用的一个数字滚动插件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。
你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;
安装使用:
npm install vue-count-to
例子:
<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> </template> <script> import countTo from 'vue-count-to'; export default { components: { countTo }, data () { return { startVal: 0, endVal: 2017 } } } </script>
使用CDN脚本: demo
选项
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 | — |
** 注意:当autoplay:true时,它将在startVal或endVal更改时自动启动**
功能
Function Name | Description |
---|---|
mountedCallback | 挂载以后返回回调 |
start | 开始计数 |
pause | 暂停计数 |
reset |
重置countTo |
这篇关于vue-countTo---简单好用的一个数字滚动插件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南