@tongfun/tf-widget 0.1.21 → 0.1.22

package/package/tf-layout/src/components/tf-labelbar.vue

@@ -1,394 +1,394 @@
-<template>
-  <div class="tf-labelbar">
-    <div class="close-menu">
-      <div
-        :class="closeMenu ? 'open-menu-icon': 'close-menu-icon'"
-        src=""
-        alt=""
-        title="隐藏列表"
-        @click="changeMenuState"
-      />
-    </div>
-    <ul ref="labelMenu">
-      <li
-        v-for="tagItem in tagList"
-        :key="tagItem.path"
-        :class="activePath === tagItem.path ? 'active-tag' : ''"
-        @click="routeJump(tagItem)"
-        @contextmenu.prevent.stop="rightClick(tagItem, $event)"
-      >
-        <span>{{ tagItem.title }}</span>
-        <i
-          v-show="!tagItem.notCloseTag"
-          class="el-icon-close close-icon"
-          @click.stop="closeTag(tagItem)"
-        />
-      </li>
-    </ul>
-    <div
-      class="scrollbar-icon left"
-      @click="handleScroll('left')"
-    />
-    <el-dropdown
-      class="right-menu"
-      trigger="click"
-      @command="dropdownCommand"
-    >
-      <span class="el-dropdown-link">
-        <TfRotateBox />
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item
-          icon="el-icon-back"
-          command="closeLeft"
-        >关闭左侧</el-dropdown-item>
-        <el-dropdown-item
-          icon="el-icon-right"
-          command="closeRight"
-        >关闭右侧</el-dropdown-item>
-        <el-dropdown-item
-          icon="el-icon-circle-close"
-          command="closeOther"
-        >关闭其他</el-dropdown-item>
-        <el-dropdown-item
-          icon="el-icon-circle-close"
-          command="closeAll"
-        >关闭全部</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <div
-      class="scrollbar-icon right"
-      @click="handleScroll('right')"
-    />
-    <TfRightMenu
-      :left="rightMenuLeft"
-      :top="rightMenuTop"
-      :show-menu="showRightMenu"
-      @rightMenuClick="dropdownCommand"
-    />
-  </div>
-</template>
-
-<script>
-import TfRotateBox from './tf-rotate-box.vue'
-import TfRightMenu from './tf-right-menu'
-export default {
-  name: 'TfLaberBar',
-  components: {
-    TfRotateBox,
-    TfRightMenu
-  },
-  props: {
-    routeBase: {
-      default: null,
-      type: String
-    }
-  },
-  data () {
-    return {
-      closeMenu: false,
-      activePath: '/',
-      tagList: [],
-      rightMenuLeft: 0,
-      rightMenuTop: 0,
-      showRightMenu: false
-    }
-  },
-  watch: {
-    $route: {
-      handler: function (newValue) {
-        if (newValue && newValue.matched[0]?.meta.base === this.routeBase) {
-          const { meta, path, name, params, query } = newValue
-          if (!path) return
-          const obj = {
-            path,
-            name,
-            params,
-            query,
-            defaultRoute: meta.defaultRoute,
-            notCloseTag: meta.defaultRoute,
-            title: meta.title,
-            replace: meta.replace
-          }
-          if (!meta.noCache) {
-            const cacheArr = newValue.matched.map(item => item.name)
-            const cacheObj = this.tagList.find(item => item.path === obj.path)
-            if(!cacheObj) this.$emit('setCache', cacheArr)
-            obj.cacheArr = cacheArr
-          }
-          if (obj.defaultRoute) {
-            if (!this.checkMenu(obj.path)) this.tagList.unshift(obj)
-          } else {
-            if (!this.checkMenu(obj.path)) this.tagList.push(obj)
-          }
-          // todo: 增加页面缓存
-          this.activePath = path
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  created () {
-    window.addEventListener('click', () => {
-      this.showRightMenu = false
-    }, false)
-  },
-  methods: {
-    changeMenuState () {
-      this.closeMenu = !this.closeMenu
-      this.$emit('changeMenuState', this.closeMenu)
-    },
-    /**
-     * @description tag右键点击事件
-     */
-    rightClick: function (tagItem, $event) {
-      this.routeJump(tagItem)
-      this.$nextTick(() => {
-        this.rightMenuTop = $event.clientY
-        this.rightMenuLeft = $event.clientX
-        this.showRightMenu = true
-      })
-    },
-
-    /**
-     * @member
-     * @description 右侧操作
-     * @param params: 操作指令: closeLeft => 关闭左侧, closeRight => 关闭右侧, closeAll => 关闭全部,
-     */
-    dropdownCommand: function (params) {
-      const activeNum = this.tagList.findIndex(
-        (item) => item.path === this.activePath
-      )
-      const pathMap = new Map()
-      const deleteArr = []
-      const pathArr = this.tagList.map((item) => {
-        pathMap.set(item.path, item)
-        return item.path
-      })
-      switch (params) {
-        case 'closeLeft':
-          deleteArr.push(...pathArr.slice(0, activeNum))
-          break
-        case 'closeRight':
-          deleteArr.push(...pathArr.slice(activeNum + 1, pathArr.length))
-          break
-        case 'closeOther':
-          deleteArr.push(...pathArr.slice(0, activeNum))
-          deleteArr.push(...pathArr.slice(activeNum + 1, pathArr.length))
-          break
-        default:
-          deleteArr.push(...pathArr)
-          break
-      }
-      const deleteCacheArr = []
-      deleteArr.forEach((item) => {
-        const tagItem = pathMap.get(item)
-        if (tagItem && tagItem.cacheArr) deleteCacheArr.push(tagItem.cacheArr)
-        if (tagItem && !tagItem.notCloseTag) {
-          const num = this.tagList.indexOf(tagItem)
-          this.tagList.splice(num, 1)
-        }
-      })
-
-      this.$emit('deleteCache', deleteCacheArr)
-      if (params === 'closeAll') this.routeJump(this.tagList[0])
-    },
-    /**
-     * @description 左右滑动
-     * @param direction: 滑动方向
-     */
-    handleScroll (direction) {
-      let rollNum = 0
-      rollNum = direction === 'right' ? rollNum + 50 : rollNum - 50
-      const dom = this.$refs.labelMenu
-      dom.scrollLeft += rollNum
-    },
-    /**
-     * @description 点击tag标签
-     * @param path: 每项Tag
-     */
-    checkMenu (path) {
-      if (this.tagList.find((item) => item.path === path)) return true
-      return false
-    },
-    /**
-     * @description 路由跳转
-     */
-    routeJump: function (value) {
-      if (value && value.path !== this.activePath) {
-        const { path, query, params, replace } = value
-        if (replace) {
-          this.$router.replace({
-            path,
-            query,
-            params
-          })
-        } else {
-          this.$router.push({
-            path,
-            query,
-            params
-          })
-        }
-      }
-    },
-    /**
-     * 关闭tag
-     */
-    closeTag: function (tagItem, deleteCacheArr = true) {
-      if (tagItem.cacheArr && deleteCacheArr) this.$emit('deleteCache', [tagItem.cacheArr])
-      const num = this.tagList.indexOf(tagItem)
-      if (tagItem) {
-        this.tagList.splice(num, 1)
-        this.routeJump(this.tagList[num - 1])
-      }
-    },
-    /**
-     * 关闭当前标签页
-     */
-    closeDynamicRoutingTag () {
-      const nameArr = this.tagList.map(d => d.name === this.$route.name)
-      const tagItem = this.tagList.find(d => d.path === this.$route.path)
-      if (tagItem) {
-        // 如果tagList中存在两个及以上相同name路由，表明不能删除该缓存
-        this.closeTag(tagItem, !(nameArr.length > 1))
-      }
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.tf-labelbar {
-  width: 100%;
-  height: 40px;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 73px;
-  .close-menu {
-    cursor: pointer;
-    position: absolute;
-    left:0;
-    height: 40px;
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
-   .close-menu-icon {
-      height: 15px;
-      width: 15px;
-      background: #99999a;
-      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAdpJREFUOE+Nkz1rFUEUht8zs0kstBArBUst9C8oEv/DvYg7V+9soZWVJhoxsCJ+YCspFLyzYecSkosgElNYqAg22hhFwUII4g+wEnFn58jG3Xh39wpOM5/nmcN73kNB395l0Ns8CUforEmMujnGx6SzsXuS2n4hosduEF5E/CJAPOt27su91Klmpt0+UfcQxwJx7Ks3JKJ0UzA9dUZdrQHO3Z/Cg/OZjIZ9MBuAo9z0TDNLEtp+EIx1l6iFHUAVrO1ZAAmAXm6Ubf5eZNEGFKfxrJPRMASzBdOZPAlTdNamMepkNX1agO1H3V9SWwUgBXAqN2q1GTS+b2QQC7l1qAviFSZc8j5bwnSwF1nmMLWLkf2k7eBq7YIffwDAhjPqMvTKQYn8K4CiEsW8v1w3k2AAAuB3LQ3E1rd5IrrJxPMSeMaQe8j7v6UtUUwsHOh7HVCqL6J0kZjmBPHxbNDb/H8NCsCBw1xUIdD2BgPXSNAJ9zB8hQsbM9j3JsPHI4Sjn7iaJ/ugdGCg7S0GFsjjmFtWr//lg/cCWG85sYL07W0mXCGik25w+iXi61SzchANP4P9E2d6c/VeYEJnJIrmCqL0jmfKvFGLLStLbR8x4bkfqKWJ3dhonqagvwFo3iEkt6LFjgAAAABJRU5ErkJggg==);
-      &:hover {
-        background: #07579a;
-      }
-    }
-    .open-menu-icon {
-      height: 15px;
-      width: 15px;
-      background: #99999a;
-      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAbRJREFUOE+dk7FP21AQxr/PzyZCsLQjXWFhQR0qVQyoLFXF2JIsicBxVHWooHSsOtRbxUAlRKWqgDDItiDAP8AEqBPs/RM6FykTxO9dFSd2lKSkUt/47u6n7+67I4Y+YTtMydOKxwonJW274QshdzsJnXAWrEbrAj7UQfk10r+iySH+uQ1/PlFeWIKw3gvwfQv+J7GX41mxcAFwfwCSAarRIoCjXkBLSArxjeOFM0Z4DWJX71Xe5kr8C5UqaAPqTAv6389pGyelO6d2+NgYfQViJ4c8+G1h+02zCxg+RRRq4WQivKYgTILKO/S2UCfceGpE6ULK0Va3JWVE4DhNJA0lmIXwgOSXpOF8aKnLFahq9AvAxD+E3AAyCrBgwTxtBktXyo2LoBwTSwePgMIYLN31OqNpZcMkDWuEC4R8F5gNM37zEVurt8oLX0F4OuhCnxTHjZ4Yyg8RfjP7lfdtN0q6Cxjigu2Gz4Q8B/hVB+WVtDhz4V4FnT2wa/GcGLkkuJkE5bWBPfgrICv2ouciOBsobt1EZqMbvwSlbwb5oUSfxcKY3qus3nsLuQv/e41ePC8i238Ap2nyLhWRefAAAAAASUVORK5CYII=);
-      &:hover {
-        background: #07579a;
-      }
-    }
-  }
-
-  ul {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    align-items: flex-end;
-    justify-content: left;
-    list-style: none;
-    overflow-y: hidden;
-    overflow-x: auto;
-    &::-webkit-scrollbar {
-      display: none;
-      height:0;
-    }
-    li {
-      padding: 0 30px;
-      font-size: 14px;
-      color: #515a6e;
-      height: 35px;
-      margin: 10px -19px 0 0;
-      cursor: pointer;
-      display: flex;
-      white-space: nowrap;
-      align-items: center;
-      justify-content: center;
-      box-sizing: content-box;
-      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
-      mask-repeat: no-repeat;
-      mask-size: 95% 100%;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
-      .close-icon {
-        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
-        margin-left: 8px;
-        width: 0;
-        overflow: hidden;
-        &:hover {
-          border-radius: 50%;
-          background: #666666;
-          color: white;
-        }
-      }
-      &:hover {
-        background: #dee1e6;
-        .close-icon {
-          width: 14px;
-        }
-      }
-  }
-    .active-tag {
-      padding: 0 20px !important;
-      color: #0361A4 !important;
-      background: #ECF5FF !important;
-      .close-icon {
-        min-width: 14px;
-      }
-    }
-  }
-  .scrollbar-icon {
-    cursor: pointer;
-    width: 13px;
-    height: 13px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    &:hover {
-      background: #07579a;
-    }
-  }
-  .left {
-    background: #99999a;
-    left: 55px;
-    mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAA9RJREFUSEuVl0tvG2UUhp/zeRIXaMFiEaEsyq1NU0oJKVBaxEVtWqCoRVzELyB2HEXiByAkAgsuldhESmJHsiIlexawoC0qioAFFWUFCJVFEWJFEBtEAh6Pv4NOPBMcx5fxSN7NO8/3nffcLKR8VFUqlcr+KIqOOOe0Vqv9MDMz81tKOaYvlUp3ZzKZw977WyStsFKp7KvVauMi8hiw6Zxby+fzP/Wjr9frx1T1GJBNBZ6fn98bBMHDwCvA08BN7/3C9PT0Whpwk/5V4KRpeoKXl5f3hGH4AHABeBk4CnwnIm8XCoXPeoFb9AYeAWpdwSaqVquHgAkRMZGFaQ9wXVXfLBaLn3cDt9E/CgRA1BEcn/Sgqp4VkbPACSBnIFX9AninWCx+2QncRR8Cf7cFJycVkVOqekFExoE7AAfUgSvAe1NTU1+3A/fQ/wv8uQtsoiiKRur1+pmWm2qcExFg3l5sB06h3wR+3wFuOulpVT0f39TCa+9tg1X1koh8mICtRkVEU+p3gufm5rLZbHbEPAWeFZHHE09bwhmJyBUR+SCfz3+VQPvQ/wP8sXXjDp4kN2210UJt2bztcZ/6BnhhYeG+gYGBIe+9NYZTzdnbIWO3PLYb53K5a+vr67kgCEZE5KmU+ga4VCq97py7x3tvyTQaZ2+7bG/2+NNMJnPROfdjFEVjqvqCQXvok3s0wEtLS4vAqKo+GRd3p9JsBn+sqh9ls9lfwjA8JyJ54Dgw2KuTAQ1wuVyuiMghVbUeanWaGhwEwa/ee6vzvKo+AmT6Ab8B3Bv7cz+wt4O4uY4/sToeHBy8EYbhcRE5r6rm8YEu+p2hLpfLo977u5xzp4FnAOtS+7qcfDu5VPVb59ydURQd7kPfCLXV4erq6q2bm5sPicgZ4BzwYBf4rnJaWVm5rQ/9/3VstzPxxsaGbReWoROAzd92Yd9qIKr6vnWupIH0od8JNrgNbOfcWCaTmVDV54EjwO2tnatTy0ypt5bZ6FzNj604YRiaZ88BFvrE81RDIoV+95BIDmBhq1arR+MJZaFv9rwuIpeTULdLwh56C/XusdgM7+C53fyqc+5dGxKdsr+L51Xgr66rT+KZc84m1ovxvhWo6jfAW8Vi8Wq3htFGPxa/X+257MWeWam9ZL+4SVyLl73LvTpVi96Wxf3WNnuC7cPlctnWHpvPrwFPAD8Dc4VCYc0WgF7wFr19p/uWmXzQanVxcTHnnDPRSRHZcM5dmpyc/D4NuFkvIidUdTDVje0As7Ozbnh4+ID33oaBF5HrhULhZhpwoh8aGjoYBMG4/YX5D8BcMmEDOwIbAAAAAElFTkSuQmCC);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-  }
-  .right {
-    background: #99999a;
-    right: 55px;
-    mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAA25JREFUSEuVls9rXFUUx7/fO3mDojAhZGFwIYgbFXUj4kJqpQqtC5dxHUiYRDCL7NRSWsG/IS/PB6Vr20ijNNL0h0mlPzQNRVyIyZgWF1FrWhV1kpl59ytH3pNxmJk73uXjfu/nnXO+95zLOI7fdM7VW63WNzMzM9skhcBK0/Qx7/1z3nuWSqWvJycnb4d0jOP4KMm6pKsjIyM3x8fHGyFQkiRPSzpEskzyi0qlshHSGegagCbJz7IsO1Mqlb6vVqvNfrA4jg3yFoBHSH7aarUWQzouLCz8mh+6Lum09/7y6Ojodr8/TJLkiKQTAJ4iedV7vxjSGagOoAzgDwDXASw659YqlUqtFyxJklcBfCDpBQC/AbgR0hnINj4IIAJwj+QVScskL0va7pbGJElelvQ+gAN5NoI6A90H8FAOMsf9AuCapCXn3JXh4eHbnZEZCMBxSQcBFC7tqzPQLoCH8/SZiAB+NDdJWsmybLUotCSajfOIrEYGtNVXZxs6QYXZMgC7JM0gZ9thtqEjonaD9tT1AhXiXUlrAM63uyqO4wMkjwN4pcc1+I+uXC7fDYG8RQbgJoAl7/3y9PT0nTRNX/LeHwNg7uu2/tFJ2iD5MclaCFQcYnfNDHJqaGhopdlsPumcew/AkUAXMUevkdwcBFQU2lx1kmRKcsR7/w6AN/qACt2OpDv/B3Sf5ElJHwKoAHh3QNDPAH4YBGQ/bV3jKwCnoig612g0nnDOHZX0eiB1f+YtKpg6C9/qcwvAJwCWd3Z2tsbGxl4keUzSaz1A/+pIngUQNIN1Det/5wFcLJfLmxMTE3sD2LvQrQC44L3/qVfqzJ73LBIbA5Iu7e/vfzc7O7sfuLA9db1a0N3czhecc5eiKKpZJEULmp+fP+icswvb2YK66ooW1N5U7Ztd0C+tJpJWG41GzSIpIF0iKmzcVVfUsHNMWOGv27S13O7t7W0V6WovepcxEdS1D76/cgsvkfw8iqJvLV3dXNUx+H4vWlQ/XTGPSpJuOefOZFl2sV6v1+bm5mzydl1xHB92zp2Q9KylmeRiSGegdQCt3MIftburD+iQc+5tSY9KOkfydEhnIJv9dZumURTd6JWuAmqmSNP0Ge/9YZIPAFgdRGfPrQl7QALYmJqa2gw9BA2UJMnjkp4H4ACsV6vVrZDubzHWkATwr3pxAAAAAElFTkSuQmCC);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-  }
-  .right-menu {
-    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
-    justify-content: center;
-    cursor: pointer;
-    width: 40px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0px;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
+<template>
+  <div class="tf-labelbar">
+    <div class="close-menu">
+      <div
+        :class="closeMenu ? 'open-menu-icon': 'close-menu-icon'"
+        src=""
+        alt=""
+        title="隐藏列表"
+        @click="changeMenuState"
+      />
+    </div>
+    <ul ref="labelMenu">
+      <li
+        v-for="tagItem in tagList"
+        :key="tagItem.path"
+        :class="activePath === tagItem.path ? 'active-tag' : ''"
+        @click="routeJump(tagItem)"
+        @contextmenu.prevent.stop="rightClick(tagItem, $event)"
+      >
+        <span>{{ tagItem.title }}</span>
+        <i
+          v-show="!tagItem.notCloseTag"
+          class="el-icon-close close-icon"
+          @click.stop="closeTag(tagItem)"
+        />
+      </li>
+    </ul>
+    <div
+      class="scrollbar-icon left"
+      @click="handleScroll('left')"
+    />
+    <el-dropdown
+      class="right-menu"
+      trigger="click"
+      @command="dropdownCommand"
+    >
+      <span class="el-dropdown-link">
+        <TfRotateBox />
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          icon="el-icon-back"
+          command="closeLeft"
+        >关闭左侧</el-dropdown-item>
+        <el-dropdown-item
+          icon="el-icon-right"
+          command="closeRight"
+        >关闭右侧</el-dropdown-item>
+        <el-dropdown-item
+          icon="el-icon-circle-close"
+          command="closeOther"
+        >关闭其他</el-dropdown-item>
+        <el-dropdown-item
+          icon="el-icon-circle-close"
+          command="closeAll"
+        >关闭全部</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <div
+      class="scrollbar-icon right"
+      @click="handleScroll('right')"
+    />
+    <TfRightMenu
+      :left="rightMenuLeft"
+      :top="rightMenuTop"
+      :show-menu="showRightMenu"
+      @rightMenuClick="dropdownCommand"
+    />
+  </div>
+</template>
+
+<script>
+import TfRotateBox from './tf-rotate-box.vue'
+import TfRightMenu from './tf-right-menu'
+export default {
+  name: 'TfLaberBar',
+  components: {
+    TfRotateBox,
+    TfRightMenu
+  },
+  props: {
+    routeBase: {
+      default: null,
+      type: String
+    }
+  },
+  data () {
+    return {
+      closeMenu: false,
+      activePath: '/',
+      tagList: [],
+      rightMenuLeft: 0,
+      rightMenuTop: 0,
+      showRightMenu: false
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (newValue) {
+        if (newValue && newValue.matched[0]?.meta.base === this.routeBase) {
+          const { meta, path, name, params, query } = newValue
+          if (!path) return
+          const obj = {
+            path,
+            name,
+            params,
+            query,
+            defaultRoute: meta.defaultRoute,
+            notCloseTag: meta.defaultRoute,
+            title: meta.title,
+            replace: meta.replace
+          }
+          if (!meta.noCache) {
+            const cacheArr = newValue.matched.map(item => item.name)
+            const cacheObj = this.tagList.find(item => item.path === obj.path)
+            if (!cacheObj) this.$emit('setCache', cacheArr)
+            obj.cacheArr = cacheArr
+          }
+          if (obj.defaultRoute) {
+            if (!this.checkMenu(obj.path)) this.tagList.unshift(obj)
+          } else {
+            if (!this.checkMenu(obj.path)) this.tagList.push(obj)
+          }
+          // todo: 增加页面缓存
+          this.activePath = path
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created () {
+    window.addEventListener('click', () => {
+      this.showRightMenu = false
+    }, false)
+  },
+  methods: {
+    changeMenuState () {
+      this.closeMenu = !this.closeMenu
+      this.$emit('changeMenuState', this.closeMenu)
+    },
+    /**
+     * @description tag右键点击事件
+     */
+    rightClick: function (tagItem, $event) {
+      this.routeJump(tagItem)
+      this.$nextTick(() => {
+        this.rightMenuTop = $event.clientY
+        this.rightMenuLeft = $event.clientX
+        this.showRightMenu = true
+      })
+    },
+
+    /**
+     * @member
+     * @description 右侧操作
+     * @param params: 操作指令: closeLeft => 关闭左侧, closeRight => 关闭右侧, closeAll => 关闭全部,
+     */
+    dropdownCommand: function (params) {
+      const activeNum = this.tagList.findIndex(
+        (item) => item.path === this.activePath
+      )
+      const pathMap = new Map()
+      const deleteArr = []
+      const pathArr = this.tagList.map((item) => {
+        pathMap.set(item.path, item)
+        return item.path
+      })
+      switch (params) {
+        case 'closeLeft':
+          deleteArr.push(...pathArr.slice(0, activeNum))
+          break
+        case 'closeRight':
+          deleteArr.push(...pathArr.slice(activeNum + 1, pathArr.length))
+          break
+        case 'closeOther':
+          deleteArr.push(...pathArr.slice(0, activeNum))
+          deleteArr.push(...pathArr.slice(activeNum + 1, pathArr.length))
+          break
+        default:
+          deleteArr.push(...pathArr)
+          break
+      }
+      const deleteCacheArr = []
+      deleteArr.forEach((item) => {
+        const tagItem = pathMap.get(item)
+        if (tagItem && tagItem.cacheArr) deleteCacheArr.push(tagItem.cacheArr)
+        if (tagItem && !tagItem.notCloseTag) {
+          const num = this.tagList.indexOf(tagItem)
+          this.tagList.splice(num, 1)
+        }
+      })
+
+      this.$emit('deleteCache', deleteCacheArr)
+      if (params === 'closeAll') this.routeJump(this.tagList[0])
+    },
+    /**
+     * @description 左右滑动
+     * @param direction: 滑动方向
+     */
+    handleScroll (direction) {
+      let rollNum = 0
+      rollNum = direction === 'right' ? rollNum + 50 : rollNum - 50
+      const dom = this.$refs.labelMenu
+      dom.scrollLeft += rollNum
+    },
+    /**
+     * @description 点击tag标签
+     * @param path: 每项Tag
+     */
+    checkMenu (path) {
+      if (this.tagList.find((item) => item.path === path)) return true
+      return false
+    },
+    /**
+     * @description 路由跳转
+     */
+    routeJump: function (value) {
+      if (value && value.path !== this.activePath) {
+        const { path, query, params, replace } = value
+        if (replace) {
+          this.$router.replace({
+            path,
+            query,
+            params
+          })
+        } else {
+          this.$router.push({
+            path,
+            query,
+            params
+          })
+        }
+      }
+    },
+    /**
+     * 关闭tag
+     */
+    closeTag: function (tagItem, deleteCacheArr = true) {
+      if (tagItem.cacheArr && deleteCacheArr) this.$emit('deleteCache', [tagItem.cacheArr])
+      const num = this.tagList.indexOf(tagItem)
+      if (tagItem) {
+        this.tagList.splice(num, 1)
+        this.routeJump(this.tagList[num - 1])
+      }
+    },
+    /**
+     * 关闭当前标签页
+     */
+    closeDynamicRoutingTag () {
+      const nameArr = this.tagList.map(d => d.name === this.$route.name)
+      const tagItem = this.tagList.find(d => d.path === this.$route.path)
+      if (tagItem) {
+        // 如果tagList中存在两个及以上相同name路由，表明不能删除该缓存
+        this.closeTag(tagItem, !(nameArr.length > 1))
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.tf-labelbar {
+  width: 100%;
+  height: 40px;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 73px;
+  .close-menu {
+    cursor: pointer;
+    position: absolute;
+    left:0;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
+   .close-menu-icon {
+      height: 15px;
+      width: 15px;
+      background: #99999a;
+      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAdpJREFUOE+Nkz1rFUEUht8zs0kstBArBUst9C8oEv/DvYg7V+9soZWVJhoxsCJ+YCspFLyzYecSkosgElNYqAg22hhFwUII4g+wEnFn58jG3Xh39wpOM5/nmcN73kNB395l0Ns8CUforEmMujnGx6SzsXuS2n4hosduEF5E/CJAPOt27su91Klmpt0+UfcQxwJx7Ks3JKJ0UzA9dUZdrQHO3Z/Cg/OZjIZ9MBuAo9z0TDNLEtp+EIx1l6iFHUAVrO1ZAAmAXm6Ubf5eZNEGFKfxrJPRMASzBdOZPAlTdNamMepkNX1agO1H3V9SWwUgBXAqN2q1GTS+b2QQC7l1qAviFSZc8j5bwnSwF1nmMLWLkf2k7eBq7YIffwDAhjPqMvTKQYn8K4CiEsW8v1w3k2AAAuB3LQ3E1rd5IrrJxPMSeMaQe8j7v6UtUUwsHOh7HVCqL6J0kZjmBPHxbNDb/H8NCsCBw1xUIdD2BgPXSNAJ9zB8hQsbM9j3JsPHI4Sjn7iaJ/ugdGCg7S0GFsjjmFtWr//lg/cCWG85sYL07W0mXCGik25w+iXi61SzchANP4P9E2d6c/VeYEJnJIrmCqL0jmfKvFGLLStLbR8x4bkfqKWJ3dhonqagvwFo3iEkt6LFjgAAAABJRU5ErkJggg==);
+      &:hover {
+        background: #07579a;
+      }
+    }
+    .open-menu-icon {
+      height: 15px;
+      width: 15px;
+      background: #99999a;
+      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAbRJREFUOE+dk7FP21AQxr/PzyZCsLQjXWFhQR0qVQyoLFXF2JIsicBxVHWooHSsOtRbxUAlRKWqgDDItiDAP8AEqBPs/RM6FykTxO9dFSd2lKSkUt/47u6n7+67I4Y+YTtMydOKxwonJW274QshdzsJnXAWrEbrAj7UQfk10r+iySH+uQ1/PlFeWIKw3gvwfQv+J7GX41mxcAFwfwCSAarRIoCjXkBLSArxjeOFM0Z4DWJX71Xe5kr8C5UqaAPqTAv6389pGyelO6d2+NgYfQViJ4c8+G1h+02zCxg+RRRq4WQivKYgTILKO/S2UCfceGpE6ULK0Va3JWVE4DhNJA0lmIXwgOSXpOF8aKnLFahq9AvAxD+E3AAyCrBgwTxtBktXyo2LoBwTSwePgMIYLN31OqNpZcMkDWuEC4R8F5gNM37zEVurt8oLX0F4OuhCnxTHjZ4Yyg8RfjP7lfdtN0q6Cxjigu2Gz4Q8B/hVB+WVtDhz4V4FnT2wa/GcGLkkuJkE5bWBPfgrICv2ouciOBsobt1EZqMbvwSlbwb5oUSfxcKY3qus3nsLuQv/e41ePC8i238Ap2nyLhWRefAAAAAASUVORK5CYII=);
+      &:hover {
+        background: #07579a;
+      }
+    }
+  }
+
+  ul {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: left;
+    list-style: none;
+    overflow-y: hidden;
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      display: none;
+      height:0;
+    }
+    li {
+      padding: 0 30px;
+      font-size: 14px;
+      color: #515a6e;
+      height: 35px;
+      margin: 10px -19px 0 0;
+      cursor: pointer;
+      display: flex;
+      white-space: nowrap;
+      align-items: center;
+      justify-content: center;
+      box-sizing: content-box;
+      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
+      mask-repeat: no-repeat;
+      mask-size: 95% 100%;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+      .close-icon {
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+        margin-left: 8px;
+        width: 0;
+        overflow: hidden;
+        &:hover {
+          border-radius: 50%;
+          background: #666666;
+          color: white;
+        }
+      }
+      &:hover {
+        background: #dee1e6;
+        .close-icon {
+          width: 14px;
+        }
+      }
+  }
+    .active-tag {
+      padding: 0 20px !important;
+      color: #0361A4 !important;
+      background: #ECF5FF !important;
+      .close-icon {
+        min-width: 14px;
+      }
+    }
+  }
+  .scrollbar-icon {
+    cursor: pointer;
+    width: 13px;
+    height: 13px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover {
+      background: #07579a;
+    }
+  }
+  .left {
+    background: #99999a;
+    left: 55px;
+    mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAA9RJREFUSEuVl0tvG2UUhp/zeRIXaMFiEaEsyq1NU0oJKVBaxEVtWqCoRVzELyB2HEXiByAkAgsuldhESmJHsiIlexawoC0qioAFFWUFCJVFEWJFEBtEAh6Pv4NOPBMcx5fxSN7NO8/3nffcLKR8VFUqlcr+KIqOOOe0Vqv9MDMz81tKOaYvlUp3ZzKZw977WyStsFKp7KvVauMi8hiw6Zxby+fzP/Wjr9frx1T1GJBNBZ6fn98bBMHDwCvA08BN7/3C9PT0Whpwk/5V4KRpeoKXl5f3hGH4AHABeBk4CnwnIm8XCoXPeoFb9AYeAWpdwSaqVquHgAkRMZGFaQ9wXVXfLBaLn3cDt9E/CgRA1BEcn/Sgqp4VkbPACSBnIFX9AninWCx+2QncRR8Cf7cFJycVkVOqekFExoE7AAfUgSvAe1NTU1+3A/fQ/wv8uQtsoiiKRur1+pmWm2qcExFg3l5sB06h3wR+3wFuOulpVT0f39TCa+9tg1X1koh8mICtRkVEU+p3gufm5rLZbHbEPAWeFZHHE09bwhmJyBUR+SCfz3+VQPvQ/wP8sXXjDp4kN2210UJt2bztcZ/6BnhhYeG+gYGBIe+9NYZTzdnbIWO3PLYb53K5a+vr67kgCEZE5KmU+ga4VCq97py7x3tvyTQaZ2+7bG/2+NNMJnPROfdjFEVjqvqCQXvok3s0wEtLS4vAqKo+GRd3p9JsBn+sqh9ls9lfwjA8JyJ54Dgw2KuTAQ1wuVyuiMghVbUeanWaGhwEwa/ee6vzvKo+AmT6Ab8B3Bv7cz+wt4O4uY4/sToeHBy8EYbhcRE5r6rm8YEu+p2hLpfLo977u5xzp4FnAOtS+7qcfDu5VPVb59ydURQd7kPfCLXV4erq6q2bm5sPicgZ4BzwYBf4rnJaWVm5rQ/9/3VstzPxxsaGbReWoROAzd92Yd9qIKr6vnWupIH0od8JNrgNbOfcWCaTmVDV54EjwO2tnatTy0ypt5bZ6FzNj604YRiaZ88BFvrE81RDIoV+95BIDmBhq1arR+MJZaFv9rwuIpeTULdLwh56C/XusdgM7+C53fyqc+5dGxKdsr+L51Xgr66rT+KZc84m1ovxvhWo6jfAW8Vi8Wq3htFGPxa/X+257MWeWam9ZL+4SVyLl73LvTpVi96Wxf3WNnuC7cPlctnWHpvPrwFPAD8Dc4VCYc0WgF7wFr19p/uWmXzQanVxcTHnnDPRSRHZcM5dmpyc/D4NuFkvIidUdTDVje0As7Ozbnh4+ID33oaBF5HrhULhZhpwoh8aGjoYBMG4/YX5D8BcMmEDOwIbAAAAAElFTkSuQmCC);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+  }
+  .right {
+    background: #99999a;
+    right: 55px;
+    mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAA25JREFUSEuVls9rXFUUx7/fO3mDojAhZGFwIYgbFXUj4kJqpQqtC5dxHUiYRDCL7NRSWsG/IS/PB6Vr20ijNNL0h0mlPzQNRVyIyZgWF1FrWhV1kpl59ytH3pNxmJk73uXjfu/nnXO+95zLOI7fdM7VW63WNzMzM9skhcBK0/Qx7/1z3nuWSqWvJycnb4d0jOP4KMm6pKsjIyM3x8fHGyFQkiRPSzpEskzyi0qlshHSGegagCbJz7IsO1Mqlb6vVqvNfrA4jg3yFoBHSH7aarUWQzouLCz8mh+6Lum09/7y6Ojodr8/TJLkiKQTAJ4iedV7vxjSGagOoAzgDwDXASw659YqlUqtFyxJklcBfCDpBQC/AbgR0hnINj4IIAJwj+QVScskL0va7pbGJElelvQ+gAN5NoI6A90H8FAOMsf9AuCapCXn3JXh4eHbnZEZCMBxSQcBFC7tqzPQLoCH8/SZiAB+NDdJWsmybLUotCSajfOIrEYGtNVXZxs6QYXZMgC7JM0gZ9thtqEjonaD9tT1AhXiXUlrAM63uyqO4wMkjwN4pcc1+I+uXC7fDYG8RQbgJoAl7/3y9PT0nTRNX/LeHwNg7uu2/tFJ2iD5MclaCFQcYnfNDHJqaGhopdlsPumcew/AkUAXMUevkdwcBFQU2lx1kmRKcsR7/w6AN/qACt2OpDv/B3Sf5ElJHwKoAHh3QNDPAH4YBGQ/bV3jKwCnoig612g0nnDOHZX0eiB1f+YtKpg6C9/qcwvAJwCWd3Z2tsbGxl4keUzSaz1A/+pIngUQNIN1Det/5wFcLJfLmxMTE3sD2LvQrQC44L3/qVfqzJ73LBIbA5Iu7e/vfzc7O7sfuLA9db1a0N3czhecc5eiKKpZJEULmp+fP+icswvb2YK66ooW1N5U7Ztd0C+tJpJWG41GzSIpIF0iKmzcVVfUsHNMWOGv27S13O7t7W0V6WovepcxEdS1D76/cgsvkfw8iqJvLV3dXNUx+H4vWlQ/XTGPSpJuOefOZFl2sV6v1+bm5mzydl1xHB92zp2Q9KylmeRiSGegdQCt3MIftburD+iQc+5tSY9KOkfydEhnIJv9dZumURTd6JWuAmqmSNP0Ge/9YZIPAFgdRGfPrQl7QALYmJqa2gw9BA2UJMnjkp4H4ACsV6vVrZDubzHWkATwr3pxAAAAAElFTkSuQmCC);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+  }
+  .right-menu {
+    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
+    justify-content: center;
+    cursor: pointer;
+    width: 40px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>