element 选项卡,elementui的选项卡标签
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现选项卡功的具体代码，供大家参考，具体内容如下
用法：
首先自己先在项目中定义三个组件（顶部TopNav，左侧左边，中间主),这方法三两句话描述不清
我就上我用过的一个项目代码实例（但是这个有点缺陷，没有做像一键清空选项卡，关闭左右侧选项卡的方法)
顶导航
模板
El-menu class= El-menu-demo mode= horizontal background-color= # 334157 text-color= # fff active-text-color= # fff
el-button class=buttonimg
img class=showimg :src=折叠？imgshow:imgsq @click=doToggle()
！- :src=崩溃了？img show:imgsq @ click= doToggle()-
/el-button
埃尔-子菜单index=2 class=子菜单
模板槽=标题当前用户【{ {用户名}}】身份认证：{{usertype}}/template
埃尔菜单项索引=2-1 设置/El-菜单项
El-menu-item index= 2-2 @ click= mya()个人中心/El-菜单项
El-menu-item @ click= exit() index= 2-3 退出/El-菜单项
/El-子菜单
/el-menu
/模板
脚本
导出默认值{
名称：左侧，
数据：函数(){
返回{
collapsed: false，//是否折叠
imgshow: require(./assets/img/show.png )，
imgsq:要求(./assets/img/sq.png )，
用户名：会话存储。getitem(用户名)，
用户类型：会话存储。getitem(“部门”)
};
},
方法：{
doToggle() {
this.collapsed=！这。倒塌了；
console.log(TopNav的已折叠=%s ，这。崩溃了)；
这个$emit(顶击，这个。崩溃了)；
},
exit() {
这个. $确认(亲，请不要走，留下好不好？, 提示, {
confirmButtonText:残忍离开，
取消按钮文本： 留下~,
类型："警告"
}).然后(()={
这个1000美元路由器。push(/)；
}).catch(()={ })；
},
mya(){
/*这个1000美元路由器。推送(/用户中心)；*/
/*这个1000美元路由器。推送(/系统/用户中心)；*/
}
}
}
/脚本
样式范围。El-菜单-垂直-演示：不是(。埃尔-菜单-折叠){
边框：无；
}。子菜单{
浮动：对；
}。按钮
高度：60px
背景色：透明；
边框：无；
}。显示{
宽度：26px
高度：26px
位置：绝对；
top:17px；
左：17px
}。显示：活动{
边框：无；
}
/风格
左侧
模板
el菜单路由器：default-active= $ route。path class= El-menu-vertical-demo background-color= # 334157 text-color= # fff
active-text-color= # ffd 04 b :collapse=左折叠
！-El-menu default-active= 2 :collapse= collapsed collapsed-transition router:default-active= $ route。path unique-open class= El-menu-vertical-demo background-color= # 334157 text-color= # fff active-text-color= # ffd 04 b -
div class=logobox
img class=logoimg src=./assets/img/logo.png alt=
/div
！-
第一级菜单
埃尔-子菜单属性：
索引：用于菜单折叠，不能重复
关键：菜单项的唯一标识，不可重复
-
埃尔-菜单项索引=/Home 键=家
i class=el-icon-house/i
span slot=title 首页/span
/El-菜单项
！艾尔菜单项index=/Page1 key=Page1
i class=el-icon-menu/i
span slot=title 第一页/span
/El-菜单项
El-菜单项index=/page 2 key= page 2
i class=el-icon-menu/i
span slot=titlePage2/span
/El-菜单项-
埃尔-子菜单v-for= treenode中的根:index= index-根。 dictid :key= key- root。“词典”
模板槽=标题
我：根。词典图标/I
span slot= title"{ root。字典文本} }/span
/模板
！-第二级菜单-
！-
埃尔-菜单项属性：
索引：用于跳转页面，不能重复
关键：菜单项的唯一标识，不可重复
-
El-menu-item @ click= addTab(node。字典URL，节点。根中的 v-for=节点。 children :index=节点。字典URL
:key=key- node.dictId
i class=el-icon-menu/i
span slot= title"{ node。字典文本} }/span
/El-菜单项
/El-子菜单
/el-menu
/模板
脚本
导出默认值{
名称：左侧，
道具：[左折叠],
数据：函数(){
返回{
treenode:" "
};
},
方法：{
添加标签:函数(url，文本){
console.log(url，文本);
//调用状态管理中的添加标签方法，将点击的菜单对应的组件信息添加到已打开的打开标签中
这个store.commit(addTab ，{
标题：文本，//选项卡页签标题
名称：url //组件的路由
});
//设置当前标签面板为选中状态
这个100美元商店。commit( setta active ，URL)；
}
},
已创建(){
//获取请求路径
/*让URL=this。axios。网址。system _ TREENODE*/
设URL=this。axios。网址。system _ QUERY
/*，{ username:会话存储。getitem( username )} */
控制台。日志(网址)；
//发送爱可信请求
this.axios.post(url，{
用户名：sessionStorage.getItem(用户名)
}).然后(resp={
控制台。记录(相应的。数据)；
这个。treenode=resp。数据。数据；
}).catch(resp={ })；
//设置首页默认显示
//这个1000美元路由器。push(/Home )；
}
}
/脚本
主要的
template style=背景色：花白色
el-container class=主容器
El-side:class= open collapse
左侧：打开-折叠=折叠/左侧
/El-旁白
//选项卡控件
埃尔容器
el-header class=main-header
顶部导航@ click-collapse=顶部点击/顶部导航
/el-header
el-main class=主中心
El-tabs class= tabs-panel-fit v-model= active tab type= border-card closed @ tab-remove= remove tab
El-tab-pane v-for= item in open tabs :key= item。 name :label= item。 title :name= item。名称
组件：is= item。内容/组件
/El-选项卡-窗格
/el-tabs
/el-main
//时钟效果
div id= app style= margin-left:200 px；边距-顶部：-400像素；字体大小：30px
{ {日期}}
/div
/El-容器
/El-容器
/模板
脚本
从" @/components/TopNav "导入顶导航
从" @/组件/左侧"导入左侧
导出默认值{
名称：主，
数据：函数(){
返回{
折叠：假，
日期：新日期()
};
},
方法：{
点击顶部：功能（折叠){
this.collapsed=崩溃
},
移除标签:函数(目标名称){
//获取所有已打开的制表符选项卡
让制表符=这个100美元商店。吸气剂。打开标签页；
//获取当前激活的标签选项卡
让activeName=this .$ store。吸气剂。活动选项卡；
//判断当前激活的标签选项卡和当前被关闭的标签选项卡是否相同
if (activeName===targetName) {
//遍历已打开的选项卡
tabs.forEach((tab，index)={
//判断是否相同，并获取就近需要被激活选项卡
if (tab.name===targetName) {
let next tab=tabs[index 1] tabs[index-1]；
if (nextTab) {
活动名称=下一个标签。姓名；
}
}
});
}
//激活选项卡
这个100美元商店。commit( setta active ，activeName)；
//删除标签
这个. store.commit(delTab ，tabs.filter(tab=tab.name！==目标名称))；
}
},
组件：{
TopNav，
左侧
},
已计算：{//计算属性
openCollapse: function() {
回归！这。倒塌了？"主-备用":"主-备用-折叠"
},
openTabs: function() {
让openTabs=this .$ store。吸气剂。打开标签页；
let tabs=[]；
if (null==openTabs)
返回制表符；
否则{
对于(打开制表符中的左制表符){
让组件=解决=要求。assure([]，()=resolve(require( @/views tab。姓名’).vue ))))))；
tabs.push({
标题：tab.title，
名称：tab.name，
内容：组件
});
}
返回制表符；
}
},
activeTab: {
get() {
归还这个100美元商店。吸气剂。活动选项卡；
},
设置（值){
这个100美元商店。commit( setta active ，val)；
}
}
},
//展示时钟的方法
mounted() {//挂载完成
console.log(这个$路线。路径)；
如果（这个. route.path==/Home) {
这个store.commit(addTab ，{
标题： 首页，
名称："/Home "
});
这个100美元商店。commit( setta active ，/Home )；
}
let _ this=this//声明一个变量指向某视频剪辑软件实例这个，保证作用域一致
this.timer=setInterval(()={
_这个。Date=new Date()；//修改数据日期
}, 1000)
},
销毁前(){
if (this.timer) {
清除间隔(这个。定时器)；//在某视频剪辑软件实例销毁前，清除我们的定时器
}
}
}
/脚本
风格。主容器{
身高：100%;
宽度：100%;
框大小：边框-框；
}。主-侧面-折叠{
/* 在半铸钢钢性铸铁(铸造半钢)中，通过对某一样式声明！重要的，可以更改默认的半铸钢钢性铸铁(铸造半钢)样式优先级规则，使该条样式属性声明具有最高优先级*/
宽度：64px！重要；
身高：100%;
背景色：# 334157;
边距：0px
}。主要部分{
宽度：240px！重要；
身高：100%;
背景色：# 334157;
边距：0px
}。主标题，主中心{
填充：0px
边框-左侧：2px实线# 333;
身高：100%;
对象适合：填充；
}。div-分页{
边距：10px 0px
宽度：100%;
}
/* 设置制表符内容面板100%填充父容器*/。选项卡-面板-适合{
边距：0;
填充：0;
/*背景色：# 1 f2d 3d*/
宽度：100%;
身高：100%;
对象适合：填充；
}
/* 设置制表符内容面板的内边距为0 */。El-tab-border-card。El-tabs _ _ content {
填充：0;
}
/* 设置标签的表框效果（重要) */。电子标签。电子标签-边框-卡片{
箱形阴影：无；
边框-底部：无；
边框：0;
}
/*设置选项卡中第一个首页选项卡不能关闭*/。el-tabs.el-tabs__header .el-tabs__item:first-childspan {
显示：无；
}
/*元素UI对话框弹出框样式优化*/。el-dialog {
位置：绝对；
top:50%；
左：50%;
保证金：0!重要；
transform: translate(-50%，-50%)；
max-height:calc(100%-30px)；
最大宽度：calc(100%-30px)；
显示器：flex
伸缩方向：列；
/* 圆角效果*/
边框半径：0.4em
}。el-dialog.el-dialog__body {
溢出：自动；
}。el-dialog__header {
背景色：# f5f 7 fa
边框-底部：1px纯色# ccc
字体大小：14px
字体粗细：粗体；
填充：15px 20px 15px
/* 圆角效果*/
边框半径：0.4 em 0.4 em 0 em 0 em
}。el-dialog__body {
填充：20像素15像素
}。埃尔-对话框_ _页脚{
背景色：# f5f 7 fa
border-top:1px solid # CCC；
填充：15px
/* 圆角效果*/
边框半径：0em 0em 0.4em 0.4em
}。el-form.el-form-item最后一个孩子{
边距-底部：0px
}
/* 更改桌子表格的高亮背景色*/
/* .埃尔-表tr.current-rowtd {
背景：# FFF68F
} */。埃尔表el-table__body tr:hovertd{
背景：# FFF68F
字体粗细：粗体；
颜色：# 000000;
}
/* 分页组件*/
/* .div-分页{
边距：10px 0px
宽度：100%;
} */
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。