©2020-2024 ioDraw All rights reserved
这段时间,接手了一个项目,发现项目里面有许多冗余的代码 一些重复的代码 在页面中重复的写 感觉修改起来 心情挺糟糕的 就想到写这个了 以下是一个简单的示例
<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>