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

no message

Browse Source 
Former-commit-id: e93380a70dd0d0f4c49f820b6847847c86d0ef7a
Former-commit-id: 395205ca0678b50b63251c82be9bd9ce19cba18a
Former-commit-id: f994b3b19d204183b1d3673b90596e886e3b38c0
This commit is contained in:
李杨
2018-02-14 13:54:33 +08:00
parent 0f64732040
commit b6af0f13f4
3 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/demo/plugins/countup/demo.vue
View File

@@ -1,105 +0,0 @@
<template>
<Container type="ghost" class="page">
<el-card>
<PageHeader
title="组件封装演示"
url="https://github.com/inorganik/countUp.js">
</PageHeader>
</el-card>
<el-row :gutter="20">
<el-col :span="6">
<el-card>
<p slot="title">只设置目标数字</p>
<div class="group">
<CountUp :end="100"></CountUp>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<p slot="title">设置起止数值</p>
<div class="group">
<CountUp :start="14" :end="100"></CountUp>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<p slot="title">小数位数</p>
<div class="group">
<CountUp :end="100.00" :decimals="2"></CountUp>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<p slot="title">动画时长</p>
<div class="group">
<CountUp :end="100" :duration="6"></CountUp>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<p slot="title">回调函数</p>
<div class="group">
<CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<p slot="title">结束一秒后更新数值</p>
<div class="group">
<CountUp :end="end" :callback="update"></CountUp>
</div>
</el-card>
</el-col>
</el-row>
</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;
margin-bottom: $margin;
.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>