1.tag 實戰(zhàn)步驟
-
首頁的tag一開始就會存在，而且是不能進(jìn)行刪除的
-
當(dāng)點擊左側(cè)欄的時候,如果tag沒有該菜單名稱則新增，如果已經(jīng)有了那么當(dāng)前tag背景為藍(lán)色。
-
刪除當(dāng)前tag，如果是最后一個，那么路由調(diào)整到它前面那個標(biāo)簽并且背景變藍(lán)，如果不是最后一個那么路由調(diào)整到它后面那個標(biāo)簽并且背景變藍(lán)。
-
還有我們注意這個tag不論路由如何切換都是會存在的，所以這個tag一定要存在我們之前定義的Main.vue中。
2.實現(xiàn)分析
關(guān)閉時傳入當(dāng)前的tag和index；
首先刪除標(biāo)簽（注意刪除后數(shù)組數(shù)據(jù)會變化）；
然后計算刪除后的len值（如果刪除前計算需要 -1 ）；
判斷如果刪除的不是當(dāng)前項不做任何處理直接返回（不是當(dāng)前項不會影響高亮顯示）；如果是當(dāng)前項才做后續(xù)操作（route.name === tag）;
判斷l(xiāng)en===index時，證明刪除的項為當(dāng)前項則高亮顯示的索引需要減一；
否則證明高亮顯示的為當(dāng)前項（本來的一項被刪除了，那么所以index就代表被刪除后的當(dāng)前項）；文章來源：http://www.zghlxwxcb.cn/news/detail-737395.html
高亮顯示通過，router.push()跳轉(zhuǎn)到對應(yīng)頁面進(jìn)行實現(xiàn)（首先高亮顯示就是通過是否是當(dāng)前路由來顯示的）；文章來源地址http://www.zghlxwxcb.cn/news/detail-737395.html
3.代碼：
<div class="tags-box">
<div class="tags" v-for="(tag,index) of tags" :key="tag.index">
<el-tag
:closable="tag==='首頁'?false:true"
:effect="tag === currentRoute ?'dark':'plain'"
@close="handleClose(tag,index)"
@click="clickTag(tag)"
>{{tag}}</el-tag>
</div>
</div>// 關(guān)閉tag標(biāo)簽
const handleClose = (tag, index) => {
// 只有關(guān)閉當(dāng)前標(biāo)簽才會影響顯示（數(shù)據(jù)不會有任何影響）
store.commit("layout/delTags", tag);
// 判斷如果關(guān)閉的不是當(dāng)前標(biāo)簽不做任何處理
console.log(route.meta.label, tag);
if (route.meta.label !== tag) return;
// 刪除過后的數(shù)組長度
let len = tags.value.length;
// 長度=index說明是最后一個(最后一個要刪除則高亮到前一個tag上)
let routeList = router.getRoutes();
if (len === index) {
let path = routeList.find(item => item.meta.label === tags.value[index - 1])
.path;
router.push(path);
} else {
// 不相等時表明當(dāng)前項后面還有tag，則將高亮索引設(shè)置為當(dāng)前項的（刪除后的index即原來高亮的下一個）
let path = routeList.find(item => item.meta.label === tags.value[index])
.path;
router.push(path);
}
};到了這里，關(guān)于element-plus的el-tag標(biāo)簽關(guān)閉標(biāo)簽時的高亮顯示邏輯的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
