Vue组件包标签切换1、标签切换组件2、使用案例3、API使用指南4、源代码5、总结
一.制表切换单元
组件说明：
实现标签切换。
效果展示：
实现制表符切换，更改活动样式，切换到相应页面
以上的tab切换功能在前端开发中被理所当然地使用。 各种现有的零件也顺手牵羊得到了。 Vue包括一个element-ui组件和一个vue-ant-design。
element-ui 中 el-tabs 效果如下：
vue-ant-design 中 a-tabs 效果如下：
但是使用现存组件面临的问题如下
element-ui中的el-tabs使用问题
制表符文本没有居中，而是整体靠左。 复盖样式也不行。 因为下面的高亮下划线是由JS动态控制的。 在vue-ant-design中使用a-tabs的问题
选项卡之间的距离太大。 基于以上问题，我打算自己封装tab组件。 二、使用案例此组件有两种使用方式。
主页只有一个，切换时更新数据源即可，使用方法如下。 template El-tabdefaultkey='1' @ on-click=' changetab ' El-ta B- panesactkey='1' label='全部/El-ta B- paneb ' el-tab-panes /el-tab div只有我的页面，所以只要更新数据源，就可以/div/templatescriptexcript methods : { changetab (item，index ) } 切换的时候切换到不同的页面。 使用方法如下。 template El-tabdefaultkey='1' @ on-click=' changetab ' El-ta B- panesactkey='1' label='全部' div页面1/div/div/El-ta B- panes El-ta B- panesactkey='3' label=templatescriptexportdefault { data } { return }，methods 3: (index ) ) /调整数据) } }}/script三、API使用指南属性说明类型默认值defaultKey默认值tabString1actKey每个tab的唯一keyString无标签每个tab的
)1)选项卡文本样式高亮显示；
)2)将选项卡下方的下划线调整到合适的位置。
)3)选项卡式内容切换。
tabs单元templatedivdivclass=' tabs ' divref=' line ' class=' ta B- line '/div div 3360 class=' [ active key==item.achem ] ' @click='changetab($event，item，index ) (v-for=' ) (item，index ) inchildlist ' ) )。
item.label}}</div> </div> <slot></slot> </div></template><script> let self; export default { name: "ElTab", data(){ return { childList:[], activeKey:this.defaultKey,//将初始化tab赋值给activeKey slideWidth:0 } }, //获取子组件传过来的激活tab props:{ defaultKey:{ type: String, default: "1" } }, created(){ self = this; }, mounted(){ //循环tab标签 this.childList = this.$children; //设置滑动距离。平分设备宽度 this.slideWidth = window.innerWidth/this.childList.length; //设置状态线初始化滑动位置 this.$refs.line.style.width = this.slideWidth+"px"; }, methods:{ //切换tab触发事件 changeTab:(event,item,index)=>{ self.activeKey = item.actKey; self.$refs.line.style.transform = "translateX("+self.slideWidth*index+"px)"; self.$refs.line.style.transition = "transform .3s"; self.$emit('on-click',item,index);//将切换tab的事件暴露给父组件 }, //初始化时tab状态设置与相应内容显示 updateNav:()=>{ self.$children.map((item,index)=>{ if(item.actKey == self.activeKey){ item.show = true; self.$nextTick(function() { self.$refs.line.style.transform = "translateX("+self.slideWidth*index+"px)"; self.$refs.line.style.transition = "transform 0s"; }); }else { item.show = false; } }) } }, watch: { //监听当前tab,显示相应内容 activeKey() { self.$children.map((item)=>{ if(item.actKey == self.activeKey){ item.show = true; }else { item.show = false; } }) } } }</script><style> .active-tab{ color:#158ef3; height: 50px; font-weight: bold; line-height: 50px; font-size: 16px; } .tab{ color:#333; height: 50px; line-height: 50px; font-size: 16px; } .tabs{ display: flex; justify-content: space-around; align-items: center; height: 50px; border-bottom: 1px solid #f6f6f6; } .tab-line{ position: absolute; left: 0; border-bottom: 2px solid #158ef3; height: 50px; }</style> tab-pane 组件 <template> <div v-if="show"> <slot></slot> </div></template><script> export default { name: "ElTabPanes", data(){ return { show: false //初始时将所有内容隐藏 } }, props:{ actKey:{ type: String, default: "1" }, label:{ type: String, default: "" }, }, mounted(){ this.$parent.updateNav(); }, }</script> 五、总结最后总结一下封装一个 tabs 的核心思路和方法。
1. 设置初始化 tab 标签
在 tab-pane 子组件中将所有的内容隐藏(show 属性设置为 false)，在 tabs 父组件内接收由开发者自定义的 activeKey，定义一个方法，将 activeKey与子组件的 actKey 比较，如果相同，则该 tab 为初始化时激活的 tab 标签，将相应 tab 的 show 属性设置为 true，并修改 tab 样式。该方法在 tab-pane 子组件中调用。
将 tab-pane 子组件中所有的开发者添加的内容隐藏：
tabs 父组件提供的方法：
tab-pane 子组件调用：
这一步最关键，需要在 tabs 组件中使用 watch 监听当前状态，如果子组件中的 actKey 等于当前状态，则显示相应的内容。 activeKey() { self.$children.map((item)=>{ if(item.actKey == self.activeKey){ item.show = true; }else { item.show = false; } }) }