feat(TagsView): tagsView改造setup

src/layout/components/TagsView/ScrollPane.vue

@@ -1,84 +1,81 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+  <el-scrollbar
+      ref="scrollContainerRef"
+      :vertical="false"
+      class="scroll-container"
+      @wheel.prevent="handleScroll">
     <slot/>
   </el-scrollbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent, reactive, ref, toRefs, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
+import {ref, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
+import {tagsViewStoreHook} from "@store/modules/tagsView";
 
-export default defineComponent({
+const tagAndTagSpacing = ref(4)
-  emits: ['scroll'],
+const scrollContainerRef = ref(null)
-  setup(_, context) {
-    const scrollContainer = ref(null)
-    const scrollWrapper = computed(() => {
-      return (scrollContainer.value as any).$refs.wrap as HTMLElement
-    })
-    const {ctx} = getCurrentInstance() as any
-    const tagAndTagSpacing = 4
 
-    const state = reactive({
+const emits = defineEmits()
-      handleScroll: (e: WheelEvent) => {
+const emitScroll = () => {
-        const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
+  emits('scroll')
-        scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
+}
-      },
-      moveToCurrentTag: (currentTag: HTMLElement) => {
-        const container = (scrollContainer.value as any).$el as HTMLElement
-        const containerWidth = container.offsetWidth
-        const tagList = ctx.$parent.$refs.tag as any[]
-        let firstTag = null
-        let lastTag = null
 
-        // find first tag and last tag
+const {ctx} = getCurrentInstance()
-        if (tagList.length > 0) {
+const scrollWrapper = computed(() => {
-          firstTag = tagList[0]
+  return (scrollContainerRef.value as any).$refs.wrap as HTMLElement
-          lastTag = tagList[tagList.length - 1]
+})
-        }
 
-        if (firstTag === currentTag) {
+onMounted(() => {
-          scrollWrapper.value.scrollLeft = 0
+  console.log('scrollWrapper', scrollWrapper.value)
-        } else if (lastTag === currentTag) {
+  //scrollWrapper.value.addEventListener('scroll', emitScroll, true);
-          scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollWidth - containerWidth
+})
-        } else {
-          // find preTag and nextTag
-          const currentIndex = tagList.findIndex(item => item === currentTag)
-          const prevTag = tagList[currentIndex - 1]
-          const nextTag = tagList[currentIndex + 1]
-          // the tag's offsetLeft after of nextTag
-          const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-          // the tag's offsetLeft before of prevTag
-          const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
 
-          if (afterNextTagOffsetLeft > scrollWrapper.value.scrollLeft + containerWidth) {
+onBeforeUnmount(() => {
-            scrollWrapper.value.scrollLeft = afterNextTagOffsetLeft - containerWidth
+  // scrollWrapper.value.removeEventListener('scroll', emitScroll);
-          } else if (beforePrevTagOffsetLeft < scrollWrapper.value.scrollLeft) {
+})
-            scrollWrapper.value.scrollLeft = beforePrevTagOffsetLeft
-          }
-        }
-      }
-    })
 
-    const emitScroll = () => {
+function handleScroll(e: WheelEvent) {
-      context.emit('scroll')
+  const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
-    }
+  scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
+}
 
-    onMounted(() => {
-      //scrollWrapper.value.addEventListener('scroll', emitScroll, true)
-    })
 
-    onBeforeUnmount(() => {
+function moveToCurrentTag(currentTag: HTMLElement) {
-      //scrollWrapper.value.removeEventListener('scroll', emitScroll)
+  const container = (scrollContainerRef.value as any).$el as HTMLElement
-    })
+  const containerWidth = container.offsetWidth
+  const tagList = ctx.$parent.$refs.tag as any[]
 
-    return {
+  let firstTag = null
-      scrollContainer,
+  let lastTag = null
-      ...toRefs(state)
+
+  if (tagList.length > 0) {
+    firstTag = tagList[0]
+    lastTag = tagList[tagList.length - 1]
+  }
+
+  if (firstTag === currentTag) {
+    scrollWrapper.value.scrollLeft = 0
+  } else if (lastTag === currentTag) {
+    scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollWidth - containerWidth
+  } else {
+    const currentIndex = tagList.findIndex(item => item === currentTag)
+    const prevTag = tagList[currentIndex - 1]
+    const nextTag = tagList[currentIndex + 1]
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing.value
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing.value
+
+    if (afterNextTagOffsetLeft > scrollWrapper.value.scrollLeft + containerWidth) {
+      scrollWrapper.value.scrollLeft = afterNextTagOffsetLeft - containerWidth
+    } else if (beforePrevTagOffsetLeft < scrollWrapper.value.scrollLeft) {
+      scrollWrapper.value.scrollLeft = beforePrevTagOffsetLeft
     }
   }
-})
+}
 </script>
 
-
 <style lang="scss" scoped>
 .scroll-container {
   .el-scrollbar__bar {

src/layout/components/TagsView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
           v-for="tag in visitedViews"
           ref="tag"
@@ -13,11 +13,9 @@
           @contextmenu.prevent.native="openMenu(tag,$event)"
       >
         {{ tag.meta.title }}
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+        <span v-if="!isAffix(tag)" class="el-icon-close"  @click.prevent.stop="closeSelectedTag(tag)"/>
-          <el-icon :size="8">
+
-           <close />
+
-          </el-icon>
-        </span>
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -29,27 +27,25 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {Close} from '@element-plus/icons'
 import {tagsViewStoreHook} from '@/store/modules/tagsView'
 import {usePermissionStoreHook} from '@/store/modules/Permission'
-import ScrollPane from './ScrollPane.vue'
 import path from 'path-browserify'
-import {
+import { defineComponent, computed, getCurrentInstance, nextTick, onBeforeMount, reactive, ref, toRefs, watch} from "vue";
-  defineComponent,
-  computed,
-  getCurrentInstance,
-  nextTick,
-  onBeforeMount,
-  reactive,
-  ref,
-  toRefs,
-  watch
-} from "vue";
 import {RouteRecordRaw, useRoute, useRouter} from 'vue-router'
 import {TagView} from "@store/interface";
 
+import ScrollPane from './ScrollPane.vue'
+import {Close} from '@element-plus/icons'
+
+const {ctx} = getCurrentInstance() as any
+const router = useRouter()
+const route = useRoute();
+
+const visitedViews = computed(() => tagsViewStoreHook().visitedViews)
+const routes = computed(() =>usePermissionStoreHook().routes)
+
 export default defineComponent({
   components: {ScrollPane,Close},
   setup() {
@@ -232,14 +228,13 @@ export default defineComponent({
 
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .tags-view-container {
   height: 34px;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -254,22 +249,18 @@ export default defineComponent({
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
-
       &:first-of-type {
         margin-left: 15px;
       }
-
       &:last-of-type {
         margin-right: 15px;
       }
-
       &.active {
         background-color: #42b983;
         color: #fff;
         border-color: #42b983;
-
         &::before {
-          content: '';
+          content: "";
           background: #fff;
           display: inline-block;
           width: 8px;
@@ -281,7 +272,6 @@ export default defineComponent({
       }
     }
   }
-
   .contextmenu {
     margin: 0;
     background: #fff;
@@ -293,13 +283,11 @@ export default defineComponent({
     font-size: 12px;
     font-weight: 400;
     color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
-
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
-
       &:hover {
         background: #eee;
       }
@@ -318,18 +306,18 @@ export default defineComponent({
       vertical-align: 2px;
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
-
       &:before {
-        transform: scale(.6);
+        transform: scale(0.6);
         display: inline-block;
         vertical-align: -3px;
       }
-
       &:hover {
         background-color: #b4bccc;
         color: #fff;
+        width: 12px !important;
+        height: 12px !important;
       }
     }
   }