Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]]
Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45
Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad
Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee]
Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066
Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26
Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996
Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9
Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions

View File

@@ -1,99 +0,0 @@
<template>
<d2-container class="page">
<template slot="header">数字动画组件</template>
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="never" class="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-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-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-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">
<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-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 {
// 回调函数使用
className: '',
// 更新数值用
end: 50
}
},
methods: {
update () {
setTimeout(() => {
this.end = 100
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page {
.el-card {
@extend %unable-select;
.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>