效果圖
1. 簡單介紹
npm官網:vue-count-to
vue-count-to 就是一個組件插件,咱們引入進來,可以去打印一下,它就是一個組件實例,使用components註冊一下,就可以在模板中使用了,具體方式如下:
2. 安裝
npm install vue-count-to
3. 引入
import CountTo from 'vue-count-to'
4. 註冊
components: {
CountTo
5. 模板中使用
<CountTo :startVal='startVal' :endVal='endVal' :duration='duration'>
//startVal:開始節點 endVal:接受節點 duration:時間
6. 完整的代碼
<template>
<div>
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :lg="6" v-for="item of lists" :key="item.name">
<div class="grid-content bg-purple" :style="{background:item.color}">
<!--動態綁定style-->
<div class="card-panel-description">
<div class="card-panel-text">{{ item.name }}</div>
<CountTo :startVal='0' :endVal='item.number' :duration='item.duration'/>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo,
},
data() {
return {
lists: [
{
name: "最高可借金額",
color: "#67ca3a",
number: 13594,
duration: 1500,
},
{
name: "回報率",
color: "#f60",
number: 9833,
duration: 1500,
},
{
name: "業績領跑",
color: "#f56c6c",
number: 8888,
duration: 1500,
},
{
name: "安穩底薪戰隊",
color: "#409eff",
number: 6666,
duration: 1500,
},
],
}
},
created() {
},
methods: {}
}
</script>
<style scoped lang="less">
.card-panel-description {
height: 150px;
line-height: 40px;
font-weight: bolder;
font-size: larger;
color: white;
text-align: center;
}
.card-panel-text {
font-weight: 800;
font-size: larger;
height: 60px;
line-height: 60px;
color: black;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>