说实话,我挺讨厌封装的,尤其之前在华为,要求一个函数只要使用两次都得封装出去。但是,这次,我切实体会到了不封装给我带来的痛处。
我们这个项目大概有13个表格,有的有“产品规格”列,有的有“分类数量”列,有的有“处理人”列,,有的无,而他们列宽又各不相同,要我改动几个列宽(比如改5个,5x13=65处,还得试,还容易漏,而且后面老板心情不好了还可能改回来),周五给我累的啊。
重点,他们每个列宽不一样,要封装出去,怎么做呢。
思路一,公共样式,不同的类名呗,提取出去,但是el-table的,好像应用上来没生效。(可能我没找到合适的写法,有知道的童鞋可以评论区or私信指教一下,有偿)
思路二,写成变量,不同的变量名,用mixins
话不多说,上代码
src>view>mixins>table>tableWidth.js
import { ref } from 'vue';
export default function(){
let indexWidth = ref(80)
let priceCodeWidth = ref(160)
let useToWidth = ref(70)
let projectCodeWidth = ref(150)
......
return {
indexWidth, // 序号宽度
priceCodeWidth, // 报价单号宽度
useToWidth, // 用途宽度
projectCodeWidth, //项目编号宽度
......
}
}
使用:
发现公司项目vue3用了两种setup写法,第一种<script setup>这样的使用:
第二种setup(){ 这样的使用:
你必须得return出去,重要的事情说一遍[/狗头][/狗头]。
细心的同学发现了align我也进行了封装,但是是页面级别的,而且vue3两种写法使用是不一样的。(<script setup>这样的带state.,setup(){}这样的不带state.)
ok,分享完毕。
后面就是雪,火锅,和更好的我们。加油,骚年~