sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件夹改名

Browse Source 
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]]
Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0
Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33
Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83]
Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed
Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf
Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d
Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6
Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
2019-03-14 20:24:45 +08:00
parent 0de79b3462
commit 0f04615685
338 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/views/demo/components/countup/index.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<d2-container :filename="filename" type="card" class="page">
<template slot="header">数字动画组件</template>
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="never" class="d2-card d2-mb">
<p slot="title">只设置目标数字</p>
<div class="group">
<d2-count-up :end="100"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-card d2-mb">
<p slot="title">设置起止数值</p>
<div class="group">
<d2-count-up :start="14" :end="100"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-card d2-mb">
<p slot="title">小数位数</p>
<div class="group">
<d2-count-up :end="100" :decimals="2"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-card d2-mb">
<p slot="title">动画时长</p>
<div class="group">
<d2-count-up :end="100" :duration="6"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-card">
<p slot="title">回调函数</p>
<div class="group">
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="never" class="d2-card d2-mb-0">
<p slot="title">结束一秒后更新数值</p>
<div class="group">
<d2-count-up :end="end" :callback="update"/>
</div>
</el-card>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
data () {
return {
filename: __filename,
// 回调函数使用
className: '',
// 更新数值用
end: 50
}
},
methods: {
update () {
setTimeout(() => {
this.end = 100
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
.page {
.group {
display: flex;
justify-content: center;
align-items: center;
span {
font-size: 60px;
&.end {
padding: 0px 20px;
border-radius: 4px;
background-color: $color-success;
color: #FFF;
}
}
}
}
</style>