这段时间,接手了一个项目,发现项目里面有许多冗余的代码 一些重复的代码 在页面中重复的写 感觉修改起来 心情挺糟糕的 就想到写这个了 以下是一个简单的示例
<template> <div class="content"> <el-row class="content-row"> <!-- 使用v-for 来减少代码的重复 所有的东西都通过配置项来完成 唯一的变量key 我们可以把这个数据单独拿出来通过动态取值的方式来完成 --> <!-- 同时这种方式也避免了 拿到接口后 在一一给每个值重新赋值 我们可以让key定义为后端返回的字段 --> <el-col :span="6" v-for="item in dataInfo" :key="item.key" class="content-col"> <div class="content-center"> <!-- <img :src="require("~@/assets/img/one.png")" alt=""> --> <div :style="{ backgroundColor: item.color, height: '50px', lineHeight: '50px', textAlign: 'center', width: '50px' }" > 内容 </div> <div style="margin-top: 20px"> <span style="margin-right: 5px">{{ item.label }}</span> <span>{{ data[item.key] }}</span> </div> </div> </el-col> </el-row> </div></template><script>export default { props: { data: { type: Object, default: () => { return { toBeCompleted: 10, completed: 20, haveInHand: 13, total: 33 } } } }, data() { return { dataInfo: [ { label: '待完成', key: 'toBeCompleted', color: 'red' }, { label: '已完成', key: 'completed', color: 'green' }, { label: '进行中', key: 'haveInHand', color: 'yellow' }, { label: '总数', key: 'total', color: 'pink' } ] } }}</script><style lang="scss" scoped>.content { background-color: #99a9bf; height: 400px; width: 600px; border-radius: 10px; .content-row { height: 100%; display: flex; justify-content: space-between; margin-left: 20px; .content-col { background-color: #ccc; height: 100%; margin-right: 20px; display: flex; align-items: center; justify-content: center; .content-center { display: flex; flex-direction: column; align-items: center; } } }}</style>