布局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-
希望能帮助你
应该是一个组件。