element-ui 【el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】
文章分3个部分文章来源：https://www.toymoban.com/news/detail-506010.html
- el-tabs 以及右击菜单代码
- vuex 代码及其方法实现
- router路由信息常规写法&&el-menu写法常规（自行去掉修饰部分）
el-tabs 以及右击菜单代码文章来源地址https://www.toymoban.com/news/detail-506010.html
<template>
<div>
<el-tabs
v-model="activeIndexTab"
type="card"
closable
@tab-click="clickTab"
@tab-remove="removeTab"
@contextmenu.native.prevent="openContextmenu"
>
<el-tab-pane
v-for="item of openTab"
v-if="openTab.length"
:key="item.name"
class="myTab"
:label="item.name"
:name="item.path"
/>
</el-tabs>
<!-- 右边菜单 -->
<ul
v-show="visible"
:style="{ left: left + 'px', top: '42px' }"
class="contextmenu"
>
<li @click="closeSelectedTag">关闭当前</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags">关闭所有</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
left: 0,
visible: false,
selectedTag: ''
}
},
computed: {
activeIndexTab: {
get() {
return this.$store.state.tabs.activeIndexTab
},
set(newValue) {
return newValue
}
},
openTab() {
return this.$store.state.tabs.openTab
}
},
watch: {
$route: {
handler(newValue) {
let flag = false
this.openTab.到了这里，关于【element-ui 中 el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
