feat(TagsView): tagsView改造setup

2021-12-30 23:48:00 +08:00
parent 39f93d47d1
commit e142bdf9a5
2 changed files with 85 additions and 100 deletions
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/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">
-import {defineComponent, reactive, ref, toRefs, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
+<script setup lang="ts">
+import {ref, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
+import {tagsViewStoreHook} from "@store/modules/tagsView";

-export default defineComponent({
-  emits: ['scroll'],
-  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 tagAndTagSpacing = ref(4)
+const scrollContainerRef = ref(null)

-    const state = reactive({
-      handleScroll: (e: WheelEvent) => {
-        const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
-        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
+const emits = defineEmits()
+const emitScroll = () => {
+  emits('scroll')
+}

-        // find first tag and last tag
-        if (tagList.length > 0) {
-          firstTag = tagList[0]
-          lastTag = tagList[tagList.length - 1]
-        }
+const {ctx} = getCurrentInstance()
+const scrollWrapper = computed(() => {
+  return (scrollContainerRef.value as any).$refs.wrap as HTMLElement
+})

-        if (firstTag === currentTag) {
-          scrollWrapper.value.scrollLeft = 0
-        } else if (lastTag === currentTag) {
-          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
+onMounted(() => {
+  console.log('scrollWrapper', scrollWrapper.value)
+  //scrollWrapper.value.addEventListener('scroll', emitScroll, true);
+})

-          if (afterNextTagOffsetLeft > scrollWrapper.value.scrollLeft + containerWidth) {
-            scrollWrapper.value.scrollLeft = afterNextTagOffsetLeft - containerWidth
-          } else if (beforePrevTagOffsetLeft < scrollWrapper.value.scrollLeft) {
-            scrollWrapper.value.scrollLeft = beforePrevTagOffsetLeft
-          }
-        }
-      }
-    })
+onBeforeUnmount(() => {
+  // scrollWrapper.value.removeEventListener('scroll', emitScroll);
+})

-    const emitScroll = () => {
-      context.emit('scroll')
-    }
+function handleScroll(e: WheelEvent) {
+  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(() => {
-      //scrollWrapper.value.removeEventListener('scroll', emitScroll)
-    })
+function moveToCurrentTag(currentTag: HTMLElement) {
+  const container = (scrollContainerRef.value as any).$el as HTMLElement
+  const containerWidth = container.offsetWidth
+  const tagList = ctx.$parent.$refs.tag as any[]

-    return {
-      scrollContainer,
-      ...toRefs(state)
+  let firstTag = null
+  let lastTag = null
+
+  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 {
--- a/src/layout/components/TagsView/index.vue
+++ b/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)">
-          <el-icon :size="8">
-           <close />
-          </el-icon>
-        </span>
+        <span v-if="!isAffix(tag)" class="el-icon-close"  @click.prevent.stop="closeSelectedTag(tag)"/>
+
+
      </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 {
-  defineComponent,
-  computed,
-  getCurrentInstance,
-  nextTick,
-  onBeforeMount,
-  reactive,
-  ref,
-  toRefs,
-  watch
-} from "vue";
+import { 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,20 +306,20 @@ 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;
      }
    }
  }
 }
-</style>
+</style>