首页 > vuejs组件设计

vuejs组件设计

布局1

布局2

有两个除了布局不一样其他完全一样的部分(类似图片所示),请问这里我是应该写成一个组件,把className做成参数传入props属性里面,还是写成两个组件,复用template和script里面的代码,修改对应的css呢?不知道我的思路对不对,求更好的解决方案?谢谢


判断是否应该写成一个组件还是两个组件要看几个方面:

1 看内容,如果内容相同,那么最好是写成一个组件,再通过状态控制不同的展现方式
2 复杂度,如果要让一个组件兼顾多种展现情况,而过度重构,那就得不偿失了,复杂度是构建组件的一个指标
3 重用度,如果一个组件仅仅使用一次,那么是否抽组件就不是first level thing,如果重用度非常的高,那么就需要优先考虑这个问题了

我的做法:在template里做文章

1.判断父节点的width
2.根据不同的width执行不同的css,有点类似Bootstrap grid布局

.container 最大宽度
None 750px 970px 1170px
类前缀
.col-xs- .col-sm- .col-md- .col-lg-

希望能帮助你


应该是一个组件。

【热门文章】
【热门文章】