fix:删掉一些文件
This commit is contained in:
zouzhibing
parent
ba685d1753
commit
8f00712c43
|
|
@ -1,58 +0,0 @@
|
||||||
<template>
|
|
||||||
<div ref="bsWrap" class="tags-scroll-wrap">
|
|
||||||
<div ref="bsContent" class="tags-scroll">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, watch, onMounted, nextTick } from 'vue'
|
|
||||||
import { useElementSize } from '@vueuse/core'
|
|
||||||
import BScroll from '@better-scroll/core'
|
|
||||||
import type { Options } from '@better-scroll/core'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
/** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
|
|
||||||
options: Options
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>()
|
|
||||||
|
|
||||||
const bsWrap = ref<HTMLElement>()
|
|
||||||
const instance = ref<BScroll>()
|
|
||||||
const bsContent = ref<HTMLElement>()
|
|
||||||
|
|
||||||
function initBetterScroll() {
|
|
||||||
nextTick(() => {
|
|
||||||
instance.value = new BScroll(bsWrap.value, props.options)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动元素发生变化，刷新BS
|
|
||||||
const { width: wrapWidth } = useElementSize(bsWrap)
|
|
||||||
|
|
||||||
const { width, height } = useElementSize(bsContent)
|
|
||||||
watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
|
|
||||||
if (instance.value) {
|
|
||||||
instance.value.refresh()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initBetterScroll()
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ instance })
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.tags-scroll-wrap {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.tags-scroll-inner {
|
|
||||||
/*display: flex;*/
|
|
||||||
}
|
|
||||||
.tags-scroll {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,317 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="tags-wrap-container">
|
|
||||||
<div class="tags-view" ref="scrollContainer">
|
|
||||||
<better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
|
|
||||||
<div class="tags-scroll-inner">
|
|
||||||
<div
|
|
||||||
v-for="tag in visitedViews"
|
|
||||||
:ref="setTagRef"
|
|
||||||
:path="tag.path"
|
|
||||||
:data-id="tag.path"
|
|
||||||
:fullPath="tag.fullPath"
|
|
||||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
|
||||||
:key="tag.path"
|
|
||||||
class="item-tag-wrap"
|
|
||||||
:class="isActive(tag) ? 'active' : ''"
|
|
||||||
@click.stop="routerGo(tag)"
|
|
||||||
>
|
|
||||||
<div class="tags-view-item">{{ tag.title }}</div>
|
|
||||||
<el-icon
|
|
||||||
v-if="!isAffix(tag)"
|
|
||||||
@click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
|
|
||||||
<circle-close-filled
|
|
||||||
/></el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</better-scroll>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
|
||||||
import betterScroll from './betterScroll.vue'
|
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
|
||||||
|
|
||||||
import {useSettingStore} from "@/store/modules/setting"
|
|
||||||
import {useTagsViewStore} from "@/store/modules/tagsView"
|
|
||||||
import {usePermissionStore} from "@/store/modules/permission"
|
|
||||||
|
|
||||||
import path from 'path-browserify'
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const SettingStore = useSettingStore()
|
|
||||||
const TagsViewStore = useTagsViewStore()
|
|
||||||
const PermissionStore = usePermissionStore()
|
|
||||||
|
|
||||||
const refresh = () => {
|
|
||||||
SettingStore.setReload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const routes = computed(() => PermissionStore.routes)
|
|
||||||
|
|
||||||
const visitedViews = computed(() => TagsViewStore.visitedViews)
|
|
||||||
|
|
||||||
const bsScroll = ref<Expose.BetterScroll>()
|
|
||||||
let obj = new WeakMap()
|
|
||||||
|
|
||||||
let affixTags = ref([])
|
|
||||||
const tags = ref(new Map())
|
|
||||||
// 多个ref 添加tag
|
|
||||||
const setTagRef = (el) => {
|
|
||||||
if (el) {
|
|
||||||
if (!obj.get(el)) {
|
|
||||||
tags.value.set(el.dataset['id'], el)
|
|
||||||
}
|
|
||||||
obj.set(el, el)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const rollPane = ref()
|
|
||||||
const scrollContainer = ref()
|
|
||||||
|
|
||||||
function filterAffixTags(routes, basePath = '/') {
|
|
||||||
let tags = []
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.meta && route.meta.affix) {
|
|
||||||
const tagPath = path.resolve(basePath, route.path)
|
|
||||||
tags.push({
|
|
||||||
fullPath: tagPath,
|
|
||||||
path: tagPath,
|
|
||||||
name: route.name,
|
|
||||||
meta: { ...route.meta },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (route.children) {
|
|
||||||
const tempTags = filterAffixTags(route.children, route.path)
|
|
||||||
if (tempTags.length >= 1) {
|
|
||||||
tags = [...tags, ...tempTags]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return tags
|
|
||||||
}
|
|
||||||
|
|
||||||
const initTags = () => {
|
|
||||||
let routesNew = routes.value
|
|
||||||
let affixTag = (affixTags.value = filterAffixTags(routesNew))
|
|
||||||
for (const tag of affixTag) {
|
|
||||||
if (tag.name) {
|
|
||||||
TagsViewStore.addVisitedView(tag)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const isActive = (rou) => {
|
|
||||||
return rou.path === route.path
|
|
||||||
}
|
|
||||||
const isAffix = (tag) => {
|
|
||||||
return tag.meta && tag.meta.affix
|
|
||||||
}
|
|
||||||
const addTags = () => {
|
|
||||||
const { name } = route
|
|
||||||
if (name === 'Login') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (name) {
|
|
||||||
TagsViewStore.addView(route)
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
function toLastView(visitedViews, view) {
|
|
||||||
const latestView = visitedViews.slice(-1)[0]
|
|
||||||
if (latestView) {
|
|
||||||
router.push(latestView.fullPath)
|
|
||||||
} else {
|
|
||||||
if (view.name === 'home') {
|
|
||||||
router.replace({ path: '/redirect' + view.fullPath })
|
|
||||||
} else {
|
|
||||||
router.push('/')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeSelectedTag = async (event, view) => {
|
|
||||||
if (tags.value.get(view.path)) {
|
|
||||||
tags.value.delete(view.path)
|
|
||||||
}
|
|
||||||
let { visitedViews } = await TagsViewStore.delView(view)
|
|
||||||
if (isActive(view)) {
|
|
||||||
toLastView(visitedViews, view)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭当前
|
|
||||||
const closeCurrentTab = (event)=>{
|
|
||||||
closeSelectedTag(event,route)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭其他
|
|
||||||
const closeOtherTab= async ()=>{
|
|
||||||
const { name } = route
|
|
||||||
for(let item of visitedViews.value){
|
|
||||||
if(item.name!==name){
|
|
||||||
await closeSelectedTag(null,item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭所有 去首页
|
|
||||||
const closeAllTab = async ()=>{
|
|
||||||
let visitedViews = await TagsViewStore.delAllViews()
|
|
||||||
toLastView(visitedViews,route)
|
|
||||||
}
|
|
||||||
|
|
||||||
const routerGo = (tag) => {
|
|
||||||
router.push({
|
|
||||||
path: tag.path,
|
|
||||||
query: tag.query,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleScrollAction(currentTag) {
|
|
||||||
const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
|
|
||||||
let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
|
|
||||||
const clientX = currx + currentWidth / 2
|
|
||||||
const currentX = clientX - scrollContainerRect.left
|
|
||||||
const deltaX = currentX - scrollContainerRect.width / 2
|
|
||||||
if (bsScroll.value) {
|
|
||||||
const { maxScrollX, x: leftX } = bsScroll.value.instance
|
|
||||||
const rightX = maxScrollX - leftX
|
|
||||||
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
|
|
||||||
bsScroll.value?.instance.scrollBy(update, 0, 300)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveToCurrentTag() {
|
|
||||||
nextTick(() => {
|
|
||||||
for (const [key, tag] of tags.value) {
|
|
||||||
let path = tag.attributes.path.value
|
|
||||||
if (path === route.path) {
|
|
||||||
let fullPath = tag.attributes.fullPath.value
|
|
||||||
// 移动
|
|
||||||
handleScrollAction(tag, tags.value)
|
|
||||||
if (fullPath !== route.fullPath) {
|
|
||||||
TagsViewStore.updateVisitedView(route)
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initTags()
|
|
||||||
addTags()
|
|
||||||
nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
moveToCurrentTag()
|
|
||||||
}, 50)
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(route, () => {
|
|
||||||
addTags()
|
|
||||||
nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
moveToCurrentTag()
|
|
||||||
}, 100)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
router.beforeEach(async (to, from, next) => {
|
|
||||||
if (
|
|
||||||
(from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
|
|
||||||
to.fullPath === '/home'
|
|
||||||
) {
|
|
||||||
let whiteList = ['/error/404', '/error/401']
|
|
||||||
await TagsViewStore.removeView(whiteList)
|
|
||||||
}
|
|
||||||
next()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.tags-wrap-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 10px;
|
|
||||||
.tags-view {
|
|
||||||
height: 30px;
|
|
||||||
background: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.refresh {
|
|
||||||
//margin-left: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 22px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.refresh-inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 50px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
//box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
|
|
||||||
}
|
|
||||||
//padding-right: 10px;
|
|
||||||
}
|
|
||||||
.item-tag-wrap {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 10px;
|
|
||||||
border: 1px solid #d8dce5;
|
|
||||||
&.active .tag-icon {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
background-color: $primaryColor;
|
|
||||||
color: #fff;
|
|
||||||
border-color: $primaryColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-tag-wrap:hover {
|
|
||||||
border-color: $primaryColor;
|
|
||||||
}
|
|
||||||
.tags-scroll-inner {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
.tag-icon {
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
.tags-view-item {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 12px;
|
|
||||||
.tags-inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.more{
|
|
||||||
background-color: $primaryColor;
|
|
||||||
color: white;
|
|
||||||
.tags-view-item{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue