tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(TagsView): tagsView改造setup

Browse Source
This commit is contained in:
有来技术
2021-12-30 23:48:00 +08:00
parent 39f93d47d1
commit e142bdf9a5
2 changed files with 85 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/layout/components/TagsView/ScrollPane.vue
View File

@@ -1,84 +1,81 @@
<template> <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/> <slot/>
</el-scrollbar> </el-scrollbar>
</template> </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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scroll-container { .scroll-container {
.el-scrollbar__bar { .el-scrollbar__bar {

62
src/layout/components/TagsView/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <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 <router-link
v-for="tag in visitedViews" v-for="tag in visitedViews"
ref="tag" ref="tag"
@@ -13,11 +13,9 @@
@contextmenu.prevent.native="openMenu(tag,$event)" @contextmenu.prevent.native="openMenu(tag,$event)"
> >
{{ tag.meta.title }} {{ 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> </router-link>
</scroll-pane> </scroll-pane>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -29,27 +27,25 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {Close} from '@element-plus/icons'
import {tagsViewStoreHook} from '@/store/modules/tagsView' import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {usePermissionStoreHook} from '@/store/modules/Permission' import {usePermissionStoreHook} from '@/store/modules/Permission'
import ScrollPane from './ScrollPane.vue'
import path from 'path-browserify' 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 {RouteRecordRaw, useRoute, useRouter} from 'vue-router'
import {TagView} from "@store/interface"; 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({ export default defineComponent({
components: {ScrollPane,Close}, components: {ScrollPane,Close},
setup() { setup() {
@@ -232,14 +228,13 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.tags-view-container { .tags-view-container {
height: 34px; height: 34px;
width: 100%; width: 100%;
background: #fff; background: #fff;
border-bottom: 1px solid #d8dce5; 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-wrapper {
.tags-view-item { .tags-view-item {
display: inline-block; display: inline-block;
@@ -254,22 +249,18 @@ export default defineComponent({
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
margin-top: 4px; margin-top: 4px;
&:first-of-type { &:first-of-type {
margin-left: 15px; margin-left: 15px;
} }
&:last-of-type { &:last-of-type {
margin-right: 15px; margin-right: 15px;
} }
&.active { &.active {
background-color: #42b983; background-color: #42b983;
color: #fff; color: #fff;
border-color: #42b983; border-color: #42b983;
&::before { &::before {
content: ''; content: "";
background: #fff; background: #fff;
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@@ -281,7 +272,6 @@ export default defineComponent({
} }
} }
} }
.contextmenu { .contextmenu {
margin: 0; margin: 0;
background: #fff; background: #fff;
@@ -293,13 +283,11 @@ export default defineComponent({
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #333; 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 { li {
margin: 0; margin: 0;
padding: 7px 16px; padding: 7px 16px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #eee; background: #eee;
} }
@@ -318,20 +306,20 @@ export default defineComponent({
vertical-align: 2px; vertical-align: 2px;
border-radius: 50%; border-radius: 50%;
text-align: center; 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%; transform-origin: 100% 50%;
&:before { &:before {
transform: scale(.6); transform: scale(0.6);
display: inline-block; display: inline-block;
vertical-align: -3px; vertical-align: -3px;
} }
&:hover { &:hover {
background-color: #b4bccc; background-color: #b4bccc;
color: #fff; color: #fff;
width: 12px !important;
height: 12px !important;
} }
} }
} }
} }
</style> </style>