element-ui 【el-tabs+el-menu 實(shí)現(xiàn)點(diǎn)擊菜單 新增導(dǎo)航tab頁(yè) 并實(shí)現(xiàn)關(guān)閉其他、當(dāng)前、所有的功能】
文章分3個(gè)部分文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-506010.html
- el-tabs 以及右擊菜單代碼
- vuex 代碼及其方法實(shí)現(xiàn)
- router路由信息常規(guī)寫(xiě)法&&el-menu寫(xiě)法常規(guī)（自行去掉修飾部分）
el-tabs 以及右擊菜單代碼文章來(lái)源地址http://www.zghlxwxcb.cn/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">關(guān)閉當(dāng)前</li>
<li @click="closeOthersTags">關(guān)閉其他</li>
<li @click="closeAllTags">關(guān)閉所有</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.到了這里，關(guān)于【element-ui 中 el-tabs+el-menu 實(shí)現(xiàn)點(diǎn)擊菜單 新增導(dǎo)航tab頁(yè) 并實(shí)現(xiàn)關(guān)閉其他、當(dāng)前、所有的功能】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
