lw-cdp-ui 1.2.3 → 1.2.4

package/dist/components/lwLayout/components/tags.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="adminui-tags">
-    <ul ref="tags">
-      <draggable v-model="$store.state.viewTags.viewTags"
-          @change="changeTages"
-                 itemKey="name">
-        <template #item="{element: tag, index}" keyName="tag">
-          <li v-bind:key="tag"
-              :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]"
-              @contextmenu.prevent="openContextMenu($event, tag)">
-            <router-link :to="tag">
-              <span>{{ getIdName(tag) }}</span>
-              <el-icon v-if="!tag.meta.affix"
-                       @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close /></el-icon>
-            </router-link>
-          </li>
-        </template>
-      </draggable>
-
-    </ul>
+    <draggable v-model="$store.state.viewTags.viewTags"
+               @change="changeTages"
+               class="context-menu-list"
+               ref="tags"
+               itemKey="name">
+      <template #item="{element: tag, index}"
+                keyName="tag">
+        <li v-bind:key="tag"
+            :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]"
+            @contextmenu.prevent="openContextMenu($event, tag)">
+          <router-link :to="tag">
+            <span>{{ getIdName(tag) }}</span>
+            <el-icon v-if="!tag.meta.affix"
+                     @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close /></el-icon>
+          </router-link>
+        </li>
+      </template>
+    </draggable>
   </div>
 
   <transition name="el-zoom-in-top">
@@ -90,19 +90,6 @@ export default {
     },
     $route(e) {
       this.addViewTags(e);
-      //判断标签容器是否出现滚动条
-      this.$nextTick(() => {
-        const tags = this.$refs.tags
-        if (tags && tags.scrollWidth > tags.clientWidth) {
-          //确保当前标签在可视范围内
-          let targetTag = tags.querySelector(".active")
-          targetTag.scrollIntoView()
-          //显示提示
-          if (!this.tipDisplayed) {
-            this.tipVisible = true
-          }
-        }
-      })
     },
     contextMenuVisible(value) {
       var _this = this;
@@ -157,7 +144,7 @@ export default {
       return null
     },
     // 拖动排序
-    changeTages (val) {
+    changeTages(val) {
       this.$tool.data.set('RouteTags', this.$store.state.viewTags.viewTags)
     },
     //增加tag
@@ -169,6 +156,20 @@ export default {
         this.$store.commit("pushKeepLive", route.name)
         this.$tool.data.set('RouteTags', this.$store.state.viewTags.viewTags)
       }
+
+      //判断标签容器是否出现滚动条
+      this.$nextTick(() => {
+        const tags = document.querySelector(".context-menu-list")
+        if (tags && tags.scrollWidth > tags.clientWidth) {
+          //确保当前标签在可视范围内
+          let targetTag = tags.querySelector(".active")
+          targetTag.scrollIntoView()
+          //显示提示
+          if (!this.tipDisplayed) {
+            this.tipVisible = true
+          }
+        }
+      })
     },
     //高亮tag
     isActive(route) {
@@ -289,7 +290,7 @@ export default {
     },
     //横向滚动
     scrollInit() {
-      const scrollDiv = this.$refs.tags;
+      const scrollDiv = document.querySelector('.context-menu-list')
       scrollDiv.addEventListener('mousewheel', handler, false) || scrollDiv.addEventListener("DOMMouseScroll", handler, false)
       function handler(event) {
         const detail = event.wheelDelta || event.detail;
@@ -383,8 +384,4 @@ export default {
 .tags-tip p {
   margin-bottom: 10px;
 }
-
-.dark .contextmenu li {
-  color: var(--el-text-color-primary);
-}
 </style>