1、功能需求
点击 tab栏,可以切换效果.
点击 + 号, 可以添加 tab 项和内容项.
点击 x 号, 可以删除当前的tab项和内容项....双击tab项文字或者内容项文字可以修改里面的文字内容
?...抽象对象: Tab对象
该对象具有切换功能
该对象具有添加功能
该对象具有删除功能
该对象具有修改功能
2、案例准备
获取到标题元素
获取到内容元素
获取到删除的小按钮...x号
新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)
时刻注意this的指向问题
3、切换
为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引
this.lis...this.removeTab;
获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容
removeTab(e) { e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件