需求
5个模式按钮,8个控制按钮,通过点击模式按钮来显示不同的控制按钮。
难点
因为这些按钮都是通过动态渲染出来的,所以不好控制显示,一开始想的是通过type传参,然后用switch选择,判断这个模式显示什么按钮,再去修改渲染控制按钮的数组,从而实现控制按钮的变化。
解决思路
1.模式按钮数组modelList
:在每个模式按钮中定义一个参数type,用来分辨选择的模式;
2.控制按钮数组handleList
:显示所有按钮,然后在每个控制按钮中定义一个type,存储这个按钮在哪些模式中显示;(一开始的控制type定义成了一个数组,发现数组并不好处理,就直接改成了字符串型)
3.渲染控制按钮数组selectList
:最后定义一个页面渲染控制按钮的数组,用来更新页面;
处理好数据以后,在切换事件中只需要判断控制type有没有包含传来的模式type,把包含的放在渲染数组中,就能实现功能了。
切换
this.selectList = this.handleList.filter(*v* => v.type.includes(type))
实现效果