vue数字动效使用

Vue 2021-08-24 59

在写首页时,遇到展示数据量,常常直接将其展示出来,没有动态效果,显得干巴巴的。vue中的一些插件可以解决这个问题,下面推荐一个,此插件的文档不是很详细,记录下使用

$ npm install vue-animate-number

代码如下:

main.js

// 数字动效
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)
<el-row :gutter="24" class="box1">
            <el-col :span="6" v-for="item in homeTopList" :key="item.image">
                <el-card class="box-card grid-content bg-purple" shadow="never"
                         :body-style="{padding: '10px 20px'}">
                    <div class="body">
                        <div class="body-left">
                            <div class="body-left-image">
                                <img :src="item.image" height="64" width="64" alt="">
                            </div>
                        </div>
                        <div class="body-right">
                            <div class="body-right-title">
                                {{ item.text }}
                            </div>
                            <div class="body-right-content">
                                <animate-number ref="myNum"
                                                mode="manual"
                                                :formatter="formatToScore"
                                                :key="item.text"
                                                :from="0"
                                                :to="item.value"></animate-number>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
export default {
    name: "home",
    data() {
        return {
            homeTopList: [
                {image: require('@/assets/home/increase.svg'), text: '今日新增', value: 0},
                {image: require('@/assets/home/total.svg'), text: '总数量', value: 0},
                {image: require('@/assets/home/suggest.svg'), text: '建议数量', value: 0},
                {image: require('@/assets/home/complaints.svg'), text: '投诉数量', value: 0},
            ],
            chartBoxHeight: null,
        }
    },
    methods: {
        // 格式化得分
        formatToCount(value) {
            // 保留两位小数,在此代码中没用,在包含小数的数据中有用
            if (value !== parseInt(value)) {
                return value.toFixed(2);
            }
            return value;
        },
        getHomeData() {
            reqGetHomeData().then(res => {
                if (res.rel) {
                    const {data} = res;

                    this.$set(this.homeTopList[0], 'value', data.newlyAddToday || 0); // 今日新增
                    this.$set(this.homeTopList[1], 'value', data.allCount || 0); // 总数量
                    this.$set(this.homeTopList[2], 'value', data.suggestedCount || 0); // 建议数量
                    this.$set(this.homeTopList[3], 'value', data.complaintCount || 0); // 投诉数量

                    // 数字动效
                    this.$nextTick(() => {
                        this.initChart();

                        const refs = this.$refs.myNum;

                        for (const i in refs) {
                            const v = this.homeTopList[i].value;
                            refs[i].reset(0, v); // 启动动效
                            refs[i].start();
                        }
                    })
                }
            })
        },
    },
    mounted() {
        this.getHomeData();
    },
};

绑定动态效果:https://github.com/wangdahoo/vue-animate-number/issues/5

底层:shifty,地址:https://github.com/jeremyckahn/shifty

效果:

标签:Vue

文章评论

评论列表

已有0条评论