vue tab组件,
这篇文章主要为大家详细介绍了某视频剪辑软件封装制表符组件案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件封装制表符组件案例的具体代码，供大家参考，具体内容如下
回顾封装制表符组件
熟知运用$儿童，$父母的案例
生成整个容器，通过$儿童拿取子组件
模板
div class= ll-tab
div class=ll-tabs__header
差异
ll-tabs__header__wrapper
v-if= tabsArray tabsArray。长度0
差异
v-for=制表符数组中的标签
:key=tab.name
:class= ` ll-tab _ _ item $ { activeName===tab。“名字，”is-active : } `
@click=clickTab(tab)
{{ tab.label }}
/div
/div
/div
div class=" ll-tabs _ _ body " slot/slot/div
/div
/模板
脚本
导出默认值{
名称：所有标签，
道具：[值],
data() {
返回{
tabsArray: []，
activeName: this.value，
};
},
观察：{
值(瓦尔){
这个。setcurrentname(val)；
},
},
已安装(){
this.tabsArray=this .$儿童；
},
方法：{
单击选项卡(tab) {
这个。活动名称=选项卡。姓名；
这个。update tab()；
这个. emit(change ，tab)；
},
updateTab() {
这个. children.map((ele)={
控制台。日志(ele)；
如果(ele。name===这个。活动名称){
ele.currentShow=true
ele.load=true
}否则{
ele.currentShow=false
}
});
},
setCurrentName(val) {
this.activeName=val
},
},
};
/脚本
样式lang=scss 范围。ll-tabs {
宽度：100%;
高度：自动；ll-tabs__header {
宽度：100%;is-active.ll-tab__item {
背景色：海蓝宝石；
}。ll-tabs _ _ header _ _ wrapper:before {
颜色：白色；
}。ll-tabs__header__wrapper {
宽度：100%;
显示器：flex
对齐内容：居中；
对齐-内容：灵活开始；
对齐-项目：居中；
高度：30px
填充：1px 0；
}。ll-tab__item {
宽度：适合-内容；
高度：30px
填充：0 15px
字体大小：14px
背景色：透明；
z指数：49;
光标：指针；
行高：30px
边框：1px rgba(100，100，100，0.1)实心；
右边界：无；
：最后一个类型{
border-right: 1px rgba(100，100，100，0.1)solid；
}
}
}
}。ll-tabs__body {
填充：10px 0；
高度：自动；
背景色：透明；
}
/风格
生成子组件，展示每个标签页。
模板
差异
v-if=！懒惰已加载当前显示
v-show=currentShow
:class=`ll-tab-pane tab-${name} `
插槽/插槽
/div
/模板
脚本
导出默认值{
名称： ll-tab-pane ，
道具：{
标签:字符串，
名称：字符串，
懒惰：布尔型，
},
data() {
返回{
当前显示：假
已加载：假，
};
},
已安装(){
这个$家长。update tab()；
},
};
/脚本
使用
llTabs v-model=activeName
llTabsPane name= first label= first first/llTabsPane
llTabsPane name=秒标签=秒秒/llTabsPane
llTabsPane name= third label= third third/llTabsPane
/llTabs
从" @/组件/选项卡"导入{ llTabs，llTabsPane }；
导出默认值{
组件：{ llTabs，llTabsPane }，
}
展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。