工作总遇到的问题9(点击同一个按钮实现左边框的显示和隐藏)

183 阅读1分钟

效果图如下所示: image.png

需求描述: 选择两个方案和四个方案的时候方案数据对比框的大小不一样,并且点击数据对比的时候,如果由两个方案变成四个方案,控制不收缩,显示四条数据,当方案没有变化的时候,点击数据对比,控制左边框框的显示和隐藏

思路分析: 由于数据对比按钮和左边方案数据对比的折叠框类似,因此相应的只需要给点击数据对比加上和点击折叠按钮类似的方法即可。首先定义一个变量,当方案数据变化的时候触发为true,默认为false

选中两个方案和四个方案的时候动态绑定样式:

image.png

动态样式绑定在组件的状态是如下所示:

image.png

此种方式可以实现在选中两个方案和四个方案的时候,方案数据对比框的样式是两组

折叠小三角的图标上控制折叠方法如下所示:

image.png

所以照抄收缩数据框的方法,实现点击数据对比的时候,当方案变化时,方案对比框不收缩,当方案不变化的时候点击数据收缩狂可以收缩思路如下:

1:定义一个变量,当方案数据变化的时候为true

image.png

当方案数据变化的时候,走下方加载数据请求接口,并且设置为changePlan的值为false,当方案不变的时候,点击数据对比,则加上一个类似于折叠的代码。