├── .browserslistrc ├── jest.config.js ├── assets ├── demo.gif └── logo.jpg ├── docs ├── favicon.ico ├── img │ └── vdt.c614141f.png ├── index.html └── js │ └── app.0f4ea84d.js ├── public ├── favicon.ico └── index.html ├── src ├── assets │ └── vdt.png ├── main.js ├── components │ ├── helper.js │ ├── DigitalTransform.vue │ └── DigitalTransfromScroll.vue ├── docs │ ├── Config.vue │ ├── Clock.vue │ └── Example.vue └── App.vue ├── vue.config.js ├── babel.config.js ├── .gitignore ├── dist ├── demo.html ├── vue-digital-transform.umd.min.js ├── vue-digital-transform.common.js.map ├── vue-digital-transform.common.js ├── vue-digital-transform.umd.js.map └── vue-digital-transform.umd.js ├── tests └── unit │ └── example.spec.js ├── .eslintrc.js ├── LICENCE ├── package.json ├── README_CN.md └── README.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@vue/cli-plugin-unit-jest" 3 | }; 4 | -------------------------------------------------------------------------------- /assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DakerHub/vue-digital-transform/HEAD/assets/demo.gif -------------------------------------------------------------------------------- /assets/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DakerHub/vue-digital-transform/HEAD/assets/logo.jpg -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DakerHub/vue-digital-transform/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DakerHub/vue-digital-transform/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/vdt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DakerHub/vue-digital-transform/HEAD/src/assets/vdt.png -------------------------------------------------------------------------------- /docs/img/vdt.c614141f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DakerHub/vue-digital-transform/HEAD/docs/img/vdt.c614141f.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount("#app"); 9 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: { 3 | extract: false 4 | }, 5 | 6 | publicPath: "", 7 | devServer: { 8 | host: "localhost" 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@vue/babel-preset-app", 5 | { 6 | useBuiltIns: false 7 | } 8 | ] 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw? 21 | -------------------------------------------------------------------------------- /src/components/helper.js: -------------------------------------------------------------------------------- 1 | export function digitalValidator(value) { 2 | return /^(\d|\.|,){1}$/.test(value.toString()); 3 | } 4 | 5 | export function looseDigitalValidator(value) { 6 | if (value === undefined || value === null || value === "") return true; 7 | 8 | return /^(\d|\.|,)+$/.test(value.toString()); 9 | } 10 | -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 |
类型:Number, String
默认值:undefined
10 | 需要切换的数字,只能由
11 | 0-9 . , 组成
12 |
类型:Boolean
默认值:false
19 | 单个数字是否过渡时间是否不一致,设置该属性为true时一般会将interval调小
20 |
类型:Number
默认值:500
单个数字过渡时间(ms)
27 |类型:Boolean
默认值:false
是否开启分隔符(对 value 为 Number 类型的有效)
4 |
5 | 
6 | 
7 |
8 | 一个基于 Vue 的数字切换动效库 [vue-digital-transform](https://dakerhub.github.io/vue-digital-transform/)
9 |
10 |
11 |
12 | ## Install
13 |
14 | ```bash
15 | npm install vue-digital-transform
16 | ```
17 |
18 | ## Example
19 |
20 | ```html
21 |
22 |
4 |
5 | 
6 | 
7 |
8 | [中文文档](./README_CN)
9 |
10 | Make your changes of digtals more funny. [vue-digital-transform](https://dakerhub.github.io/vue-digital-transform/)
11 |
12 |
13 |
14 | ## Install
15 |
16 | ```bash
17 | npm install vue-digital-transform
18 | ```
19 |
20 | ## Example
21 |
22 | ```html
23 |
24 | npm install vue-digital-transform
10 |
11 | <DigitalTransform
16 | :value="number"
17 | :interval="interval"
18 | :dislocation="dislocation"
19 | ></DigitalTransform>
20 |
21 | import DigitalTransform from "vue-digital-transform";
28 |
29 | export default {
30 | components: {
31 | DigitalTransform
32 | },
33 | data() {
34 | return {
35 | number: 1000,
39 | interval: 500,
40 | dislocation: false
41 | };
42 | }
43 | }
44 |
6 | vue-digital-transform
7 |