Skip to content

Commit 3ecf173

Browse files
yxxmeyxxme
committed
release 1.0.1
1 parent b93d619 commit 3ecf173

23 files changed

+17579
-1
lines changed

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎.editorconfig

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.eslintrc.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
extends: [
7+
'plugin:vue/essential',
8+
'@vue/standard'
9+
],
10+
parserOptions: {
11+
parser: 'babel-eslint'
12+
},
13+
rules: {
14+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16+
}
17+
}

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 xLsDg
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+56-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,57 @@
11
# vue-count-up
2-
It's a vue component wrap for countUp.js
2+
3+
> vue-count-up is a vue component wrap for [countUp.js](https://github.com/inorganik/countUp.js)
4+
5+
## How to use?
6+
7+
### Install
8+
9+
```bash
10+
npm install @yxxme/vue-count-up --save
11+
```
12+
13+
### Example
14+
15+
```vue
16+
<template>
17+
<count-up :endVal='endVal' />
18+
</template>
19+
20+
<script>
21+
import CountUp from '@yxxme/vue-count-up';
22+
export default {
23+
components: { CountUp },
24+
data () {
25+
return {
26+
endVal: 654321
27+
}
28+
}
29+
}
30+
</script>
31+
```
32+
33+
### Properties
34+
35+
* `endVal: Number` - the value you want to arrive at.
36+
37+
* `startVal?: Number` - the value you want to begin at.
38+
39+
* `autoplay?: Boolean` - when mounted autoplay.
40+
41+
* `delay?: Number` - when autoplay is **true**, this value represents how long to wait before starting.
42+
43+
* `options?: Object` - other options, see more [countUp.js](https://github.com/inorganik/countUp.js).
44+
45+
### Methods
46+
47+
* `start`
48+
* `pauseResume`
49+
* `reset`
50+
* `update`
51+
52+
See more [countUp.js](https://github.com/inorganik/countUp.js)
53+
54+
## License
55+
56+
MIT
57+

‎babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎examples/App.vue

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<template>
2+
<div id="app">
3+
<div class="container">
4+
<h1>Vue Count Up</h1>
5+
<h3>simple example</h3>
6+
<code>
7+
&lt;vue-count-up :end-val=&quot;123456&quot; /&gt;
8+
</code>
9+
<br>
10+
<div>
11+
<vue-count-up :end-val="123456" class="my-vue-count-up" />
12+
</div>
13+
<br>
14+
<h3>delay example</h3>
15+
<div>
16+
<code>
17+
&lt;vue-count-up :end-val=&quot;654321&quot; :delay=&quot;1500&quot; /&gt;
18+
</code>
19+
</div>
20+
<br>
21+
<div>
22+
<vue-count-up :end-val="654321" :delay="1500" class="my-vue-count-up" />
23+
</div>
24+
<br>
25+
<h3>custom example</h3>
26+
<code>
27+
&lt;vue-count-up :start-val=&quot;0&quot; :end-val=&quot;123456&quot; :autoplay=&quot;false&quot; /&gt;
28+
</code>
29+
<br>
30+
<div>
31+
<vue-count-up ref="example" :start-val="startVal" :end-val="endVal" :autoplay="autoplay" class="my-vue-count-up" />
32+
</div>
33+
<br>
34+
<div>
35+
<label class="label" for="startValInput">startVal: <input type="number" v-model.number='startVal' name='startValInput' /></label>
36+
<label class="label" for="endValInput">endVal: <input type="number" v-model.number='endVal' name='endVaInput' /></label>
37+
</div>
38+
<br>
39+
<div>
40+
<div class="example-btn" @click='startClick'>start</div>
41+
<div class="example-btn" @click='pauseResumeClick'>pause/resume</div>
42+
<div class="example-btn" @click='randomEndValClick'>random end val</div>
43+
</div>
44+
</div>
45+
</div>
46+
</template>
47+
48+
<script>
49+
import VueCountUp from '../packages'
50+
51+
export default {
52+
name: 'App',
53+
components: {
54+
VueCountUp
55+
},
56+
data () {
57+
return {
58+
startVal: 0,
59+
endVal: 123789,
60+
autoplay: false
61+
}
62+
},
63+
methods: {
64+
startClick () {
65+
this.$refs.example.reset()
66+
this.$refs.example.start()
67+
},
68+
pauseResumeClick () {
69+
this.$refs.example.pauseResume()
70+
},
71+
randomEndValClick () {
72+
this.endVal = Math.floor(Math.random() * 100000)
73+
}
74+
}
75+
}
76+
</script>
77+
78+
<style lang="scss">
79+
body {
80+
margin: 0;
81+
padding: 0;
82+
}
83+
84+
code {
85+
display: block;
86+
padding: 8px 15px;
87+
background-color: #f6f8fa;
88+
border-radius: 5px;
89+
border: 1px solid #e5e5e5;
90+
overflow-x: auto;
91+
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
92+
color: #333;
93+
font-size: 12px;
94+
}
95+
96+
#app {
97+
font-family: Avenir, Helvetica, Arial, sans-serif;
98+
-webkit-font-smoothing: antialiased;
99+
-moz-osx-font-smoothing: grayscale;
100+
color: #2c3e50;
101+
}
102+
103+
.container {
104+
width: 960px;
105+
margin: 0 auto;
106+
}
107+
108+
h1 {
109+
font-size: 60px;
110+
margin: 30px 0;
111+
color: #70b7fd;
112+
}
113+
114+
.my-vue-count-up {
115+
font-size: 40px;
116+
color: #70b7fd;
117+
}
118+
119+
.label {
120+
color: #2f4f4f;
121+
font-size: 16px;
122+
display: inline-block;
123+
margin: 15px 30px 15px 0;
124+
}
125+
126+
input {
127+
position: relative;
128+
display: inline-block;
129+
padding: 4px 7px;
130+
width: 100px;
131+
height: 28px;
132+
cursor: text;
133+
font-size: 12px;
134+
line-height: 1.5;
135+
color: rgba(0, 0, 0, .65);
136+
background-color: #fff;
137+
background-image: none;
138+
border: 1px solid #d9d9d9;
139+
border-radius: 4px;
140+
-webkit-transition: all .3s;
141+
transition: all .3s;
142+
}
143+
144+
.example-btn {
145+
display: inline-block;
146+
margin-bottom: 0;
147+
font-weight: 500;
148+
text-align: center;
149+
-ms-touch-action: manipulation;
150+
touch-action: manipulation;
151+
cursor: pointer;
152+
background-image: none;
153+
white-space: nowrap;
154+
line-height: 1.5;
155+
padding: 10px 20px;
156+
font-size: 14px;
157+
border-radius: 4px;
158+
-webkit-user-select: none;
159+
-moz-user-select: none;
160+
-ms-user-select: none;
161+
user-select: none;
162+
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
163+
transition: all .3s cubic-bezier(.645, .045, .355, 1);
164+
position: relative;
165+
color: rgba(0, 0, 0, .65);
166+
background-color: #fff;
167+
border: 1px solid #d9d9d9;
168+
margin-right: 10px;
169+
170+
&:hover {
171+
background-color: #f0f0f0;
172+
}
173+
}
174+
</style>

‎examples/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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')

‎lib/demo.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<meta charset="utf-8">
2+
<title>vue-count-up demo</title>
3+
<script src="./vue-count-up.umd.js"></script>
4+
5+
<link rel="stylesheet" href="./vue-count-up.css">
6+
7+
8+
<script>
9+
console.log(vue-count-up)
10+
</script>

0 commit comments

Comments
 (0)