vue2使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽

更新時(shí)間：2023年12月12日 10:57:42 作者：請叫我歐皇i

這篇文章主要為大家詳細(xì)介紹了vue2如何使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

設(shè)置鼠標(biāo)橫向滾動并且不展示滾動條
添加關(guān)閉其他、關(guān)閉左側(cè)、關(guān)閉右側(cè)、全部關(guān)閉標(biāo)簽功能
單個(gè)標(biāo)簽刪除功能添加，固定標(biāo)簽不可刪除
右鍵點(diǎn)擊展開操作菜單欄
設(shè)置個(gè)默認(rèn)固定的標(biāo)簽，比如首頁
點(diǎn)擊標(biāo)簽后el-menu對應(yīng)路由激活

1.效果

1.1滾動條效果如下

1.2標(biāo)簽操作如下

2.滾動條代碼講解和實(shí)現(xiàn)

滾動條我使用的是自定義指令實(shí)現(xiàn)的，給最外層的tag一個(gè)div包裹并且設(shè)置寬高和自定義指令

v-horizontal-scroll:自己寫的不是系統(tǒng)自帶的,名字要和directives下horizontal-scroll的對應(yīng)不然監(jiān)聽不到

event.preventDefault();阻止默認(rèn)事件觸發(fā)

<div class="tabs-container" v-horizontal-scroll></div>

export default {
  directives: {
    "horizontal-scroll": {
      bind: function (el) {
        el.addEventListener("wheel", function (event) {
          event.preventDefault();
          el.scrollLeft += event.deltaY;
        });
      },
    },
  },
}

<style lang="scss" scoped>
.tabs-container {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  display: flex;}
.tabs-container::-webkit-scrollbar {
  display: none;
}
</style>

3.主要代碼講解

完整代碼在最后，建議下載完整代碼后再看講解

3.1首先獲取到標(biāo)簽頁需要展示的數(shù)據(jù)

第一步，監(jiān)聽路由，這個(gè)路由我寫了el-menu通過點(diǎn)擊路由進(jìn)行監(jiān)聽，意思是如果是已有的路由那么就標(biāo)簽頁跳轉(zhuǎn)到對應(yīng)路由的標(biāo)簽，如果沒有，那么就添加標(biāo)簽。

tagsData: [
{
title: "首頁",
path: "/home",
},
],

這個(gè)是固定的標(biāo)簽，首頁不能被刪除

  watch: {
    // 監(jiān)聽當(dāng)前路由
    $route: {
      immediate: true,
      handler(val, oldval) {
        console.log(val, "路由");
        const bool = this.tagsData.find((item) => val.path == item.path);
        if (!bool) {
          this.tagsData.push({
            title: val.meta.title,
            path: val.path,
          });
        }
        console.log(this.tagsData, "路由地址");
      },
    },
    tagsData: {
      immediate: true,
      handler(val, oldval) {
        return;
      },
    },
  },

3.2標(biāo)簽樣式和標(biāo)簽屬性講解

1.:closable="index > 0"：標(biāo)簽是否可以關(guān)閉，index>0也就是除了首頁外其他的標(biāo)簽都有個(gè)x，表示可以關(guān)閉

2.:effect="item.title == $route.meta.title ? 'dark' : 'plain'"控制標(biāo)簽點(diǎn)擊后的顏色改變，也就是主題改變

3.contextmenu.native.prevent監(jiān)聽右鍵菜單點(diǎn)擊事件并且阻止默認(rèn)事件觸發(fā)

   <el-tag
      class="tag"
      size="medium"
      :closable="index > 0"
      v-for="(item, index) in tagsData"
      :key="item.path"
      @click="goPath(item.path)"
      @close="close(index)"
      :effect="item.title == $route.meta.title ? 'dark' : 'plain'"
      @contextmenu.native.prevent="rightClick($event, index)"
    >
      <i class="cir" v-show="item.title == $route.meta.title"></i
      >{{ item.title }}
    </el-tag>

樣式如下也就是添加了個(gè)小圓點(diǎn)

  .tag {
    cursor: pointer;
    margin-right: 5px;
    height: 37px;
    line-height: 34px;
    font-size: 16px;
    .cir {
      width: 8px;
      height: 8px;
      margin-right: 4px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;
    }
  }

3.3 el-tag事件代碼講解

點(diǎn)擊事件后，如果重復(fù)點(diǎn)擊會報(bào)錯(cuò)，所以這邊我做了個(gè)判斷

    // 點(diǎn)擊標(biāo)簽跳轉(zhuǎn)
    goPath(path) {
      // 解決重復(fù)點(diǎn)擊會報(bào)錯(cuò)，數(shù)據(jù)冗余
      if (path !== this.$route.path) {
        this.$router.push(path);
      }
      this.closeMenus();
    },

點(diǎn)擊關(guān)閉標(biāo)簽后對應(yīng)的路由肯定也得跟著跳轉(zhuǎn)啊，跳轉(zhuǎn)代碼如下

    close(i) {
      if (
        this.tagsData[i].path == this.$route.path &&
        i !== this.tagsData.length - 1
      ) {
        // 直接跳轉(zhuǎn)到最后一項(xiàng)了
        this.$router.push(this.tagsData[this.tagsData.length - 1].path);
      } else if (i === this.tagsData.length - 1) {
        this.$router.push(this.tagsData[this.tagsData.length - 2].path);
      }
      // 關(guān)閉當(dāng)前項(xiàng)，本質(zhì)上就是刪除tags的對應(yīng)項(xiàng)
      this.tagsData.splice(i, 1);
      this.closeMenus();
    },

3.4點(diǎn)擊關(guān)閉操作欄

點(diǎn)擊右鍵的時(shí)候打開操作欄了，但是之后關(guān)閉掉，要關(guān)閉只能把isShowTagsMenu=false就行

  mounted() {
    // 給文檔添加點(diǎn)擊事件
    document.addEventListener("click", this.closeMenus);
  },
  methods: {
    // 關(guān)閉選擇菜單
    closeMenus() {
      this.isShowTagsMenu = false;
    },
}