当前位置：首页 > news >正文

vue3实现页签

news 2024/12/16 18:19:35

功能点：

新增和删除页签
拖拽页签需要引入插件"vue-draggable-plus": "^0.6.0", 代码已注释
右键弹框操作页签
左右点击滚动页签和鼠标滑轮滚动页签

注意点

useStore涉及的部分是pina的缓存，需要改成自己的；userStore.tabStore是获取缓存里的页签，
忘pinia存储改变的页签代码

userStore.$patch(state => {state.tabStore = tabStoreList.value})

存储vue页面name用于缓存（这部分仅是参考，实际要写点逻辑，例如vue页的name和路由配置name要一致）

    // 存入需要缓存的页签的nameuserStore.$patch(state => {state.keepAliveNameList = newData.map(ele => ele.name)})

注意我的页签是根据路由path来判断的，不是根据fullPath；可能有的需求是要使用fullPath；其中includes('editType')的判断是用来解决，一套路由不同title（新增、编辑、详情）
使用了lodash库
import { VueDraggable } from "vue-draggable-plus" 使用了拖拽组件；不需要的话注释掉VueDraggable对用代码即可

代码可直接复制

<template><div><!-- <div>{{isAtLeft}} -{{isAtLeft ? '滚动条头在最左侧' : ""}}</div><div>{{isAtRight}} -{{isAtRight ? '滚动条尾在最右侧' : ""}}</div><div>{{tabsMenuIndex}}</div><div>{{keepAliveNameArr}}</div> --><!-- <div>{{tabsMenuValue}}</div><pre>{{tabStoreList}}</pre> --></div><div class="box-all flex-row" v-if="tabStoreList.length"><div class="btn_box" v-if="!_.isEmpty(tabStoreList) && hasScroll && !isAtLeft" @click="scrollLeft"><el-icon class="btn_icon" size="16"><DArrowLeft /></el-icon></div><div class="tab_box" ref="tab_box"><!-- 拖拽 --><!-- <VueDraggable ref="el" v-model="tabStoreList" :animation="150" ghostClass="ghost"> --><template v-for="(item,index) in tabStoreList" :key="index"><el-popover ref="popoverRef" :visible="showPopoverPath === item.path" placement="bottom":width="'fit-content'"><template #reference><div :id="'_id_'+item.path" class="tab_item" :class="tabsMenuValue === item.path ? 'active_bgi' : ''"@click="clickItem(item,index)" @contextmenu.prevent="tabRightClick(item,index)">{{item.tabName}}<el-icon class="close_icon" size="16" style="position:relative;top:3px;"@click.stop="deleteTab(item,index)"><Close /></el-icon></div></template><div class="popover_content"><div class="popover_btn" @click="closeRight(1,item,index)">关闭全部</div><div class="popover_btn mt" @click="closeRight(2,item,index)">关闭其他</div><div class="popover_btn mt" @click="closeRight(3,item,index)">关闭左侧</div><div class="popover_btn mt" @click="closeRight(4,item,index)">关闭右侧</div></div></el-popover></template><!-- </VueDraggable> --></div><div class="btn_box" v-if="!_.isEmpty(tabStoreList) && hasScroll && !isAtRight" @click="scrollRight"><el-icon class="btn_icon" size="16"><DArrowRight /></el-icon></div></div>
</template><script setup>
import { ref, watch, onMounted, onBeforeUnmount, nextTick, } from "vue"
import useStore from "@/store/index.js"
import { useRouter, useRoute } from "vue-router"
import _ from "lodash"
// import { VueDraggable } from "vue-draggable-plus"
import { Close, DArrowLeft, DArrowRight } from "@element-plus/icons-vue"const route = useRoute()
const router = useRouter()
const { userStore } = useStore()let tabsMenuValue = ref('') // 当前选择的tab标签页
let tabsMenuIndex = ref('') // 当前选择的tab标签页对应下标
let tabStoreList = ref(userStore.tabStore || []) // 标签页集合 取自缓存 同时会更新缓存数据// // 缓存的页签
// let keepAliveNameArr = computed(() => {
//   return userStore.keepAliveNameList || []
// })// 点击切换
const clickItem = (item) => {// 特殊处理 一个页面通过editType区分成两页的情况 -- 共用一个页签改名称if (item?.fullPath.includes('editType')) {router.push({ path: item.path, query: { ...item.query } })} else {router.push({ path: item.path })}
}
// 删除
const deleteTab = (item, index) => {tabStoreList.value = tabStoreList.value.filter((it, i) => i !== index)userStore.$patch(state => {state.tabStore = tabStoreList.value})// 判断是否是点击删除当前高亮标签 高亮删除需跳新页面if (item.path === tabsMenuValue.value) {let nextIndex = index - 1if (nextIndex === -1) { // 说明删第一个tabif (tabStoreList.value.length === 0) { // 说明删了后面没有tab了// 跳转首页或不处理} else {let nextPath = tabStoreList.value[0].pathrouter.push({ path: nextPath })}} else {let nextPath = tabStoreList.value[nextIndex].pathrouter.push({ path: nextPath })}}
}let popoverRef = ref(null)
let showPopoverPath = ref(false)
// 标签右键事件
const tabRightClick = (item) => {// console.log(item, index);showPopoverPath.value = item.path
}
// 弹出框右键事件
const closeRight = (type, item, index) => {// console.log(type, item, index);// 全部 其他 左侧 右侧if (type === 1) {tabStoreList.value = []} else if (type === 2) {tabStoreList.value = tabStoreList.value.filter((it, i) => i === index)let nextPath = tabStoreList.value[0].pathrouter.push({ path: nextPath })} else if (type === 3) {if (tabsMenuIndex.value < index) {let nextPath = tabStoreList.value[index].pathrouter.push({ path: nextPath })}tabStoreList.value = tabStoreList.value.filter((it, i) => i >= index)} else if (type === 4) {if (tabsMenuIndex.value > index) {let nextPath = tabStoreList.value[index].pathrouter.push({ path: nextPath })}tabStoreList.value = tabStoreList.value.filter((it, i) => i <= index)}userStore.$patch(state => {state.tabStore = tabStoreList.value})
}const tab_box = ref(null) // 滚动条元素
const hasScroll = ref(false) // 是否存在滚动条
const isAtLeft = ref(true); // 滚动条头在最左侧
const isAtRight = ref(false); // 滚动条尾在最右侧// 左右控制滚动条移动
const scrollLeft = () => {tab_box.value.scrollLeft = tab_box.value.scrollLeft - 800
}
const scrollRight = () => {tab_box.value.scrollLeft = tab_box.value.scrollLeft + 800
}
// 处理滚动事件
const handleScroll = () => {if (tab_box.value) {// 判断是否滚动到最左侧isAtLeft.value = tab_box.value.scrollLeft === 0;if (hasScroll.value) {// 判断是否滚动到最右侧isAtRight.value = tab_box.value.scrollLeft + tab_box.value.clientWidth >= tab_box.value.scrollWidth;} else {isAtRight.value = false}}
};
// 处理鼠标滚轮事件
const handleWheel = (event) => {if (tab_box.value) {event.preventDefault(); // 防止默认的垂直滚动// 根据鼠标滚轮的方向调整 scrollLefttab_box.value.scrollLeft += event.deltaY; // deltaY 表示垂直滚动的距离handleScroll(); // 更新滚动位置}
};watch(route, val => {const { path, matched } = valif (!matched.length) returnconst flatPermissionList = userStore.flatPermissionListconsole.log('页签监听', path, val, matched,)console.log('权限全路径', flatPermissionList);let matchedTitle = matched[matched.length - 1]?.meta?.title || ''let tabName = flatPermissionList.find(it => it.permissionUrl === path)?.permissionName || matchedTitleconsole.log('tabName', tabName);// let keepAliveName = matched[matched.length - 1].name// console.log('keepAliveName', keepAliveName);// 现在是根据路由的path来查找tabStore中是否存在相同的path，如果存在则不添加，如果不存在则添加（可能要改成fullPath判断 解决编辑新增的特殊页）tabsMenuValue.value = pathlet hasTabName = userStore.tabStore.findIndex(it => it.path === path) != -1// 特殊处理 一个页面通过editType区分成两页的情况 -- 共用一个页签改名称if (val.fullPath.includes('editType') && hasTabName) {userStore.tabStore.forEach(ele => {if (ele.path === path) {ele.tabName = tabName}})}// console.log(userStore.tabStore.findIndex(it => it.path === path), hasTabName);if (!hasTabName) {userStore.$patch(state => {state.tabStore.push({// ...val,tabName: tabName,// keepAliveName: keepAliveName,path: val.path,name: val.name, // 用于缓存的 keepAliveName// params: val.params,query: val.query,// hash: val.hash,fullPath: val.fullPath,// meta: val.meta,// close: true, // 是否支持关闭})})}tabStoreList.value = userStore.tabStore// 找到当前路由下标tabsMenuIndex.value = tabStoreList.value.findIndex(it => it.path === path)if (tab_box.value) {// 手动滑动到当前路由下标setTimeout(() => {// console.log('手动滑动到当前路由下标', tabsMenuIndex.value * 180, hasScroll.value);tab_box.value.scrollLeft = tabsMenuIndex.value * 180}, 300);}
}, { immediate: true, deep: true })watch(() => tabStoreList.value, (newData) => {nextTick(() => {if (tab_box.value) {hasScroll.value = tab_box.value.scrollWidth > tab_box.value.clientWidth// tab_box.value.scrollLeft = tabsMenuIndex.value * 180 // 可以解决新增后 新增末尾页签的没展示出问题 但效果不好}// 当没有滚动条时候，一定是在最左侧if (!hasScroll.value) {isAtLeft.value = trueisAtRight.value = false}// // 同时页签变化时候 时刻计算滚动条位置// handleScroll()// 存入需要缓存的页签的nameuserStore.$patch(state => {state.keepAliveNameList = newData.map(ele => ele.name)})})
}, { immediate: true, deep: true })const handleClickOutside = () => {showPopoverPath.value = null
};// 在组件挂载时添加全局点击事件监听器
onMounted(() => {window.addEventListener('click', handleClickOutside);if (tab_box.value) {tab_box.value.addEventListener('scroll', handleScroll);tab_box.value.addEventListener('wheel', handleWheel); // 添加鼠标滚轮事件监听}
});// 在组件卸载时移除全局点击事件监听器
onBeforeUnmount(() => {window.removeEventListener('click', handleClickOutside);if (tab_box.value) {tab_box.value.removeEventListener('scroll', handleScroll);tab_box.value.removeEventListener('wheel', handleWheel); // 移除鼠标滚轮事件监听}
});
</script><style lang="scss" scoped>
.box-all {width: 100%;max-width: 100%;.btn_box {display: inline-block;width: 46px;// height: 38px;background: #f9f9f9;border-radius: 0px 0px 0px 0px;cursor: pointer;.btn_icon {position: relative;top: 11px;left: 12px;}.btn_icon:hover {color: #00706b;}}.btn_box:first-child {box-shadow: 15px 0px 17px 1px rgba(0, 0, 0, 0.1);z-index: 0;}.btn_box:last-child {box-shadow: -15px 0px 17px 1px rgba(0, 0, 0, 0.1);}
}
.tab_box {// padding: 0 30px; // 可以看到到头的空白width: 100%;max-width: 100%;// height: 40px !important;// min-height: 40px !important;// max-height: 40px !important;white-space: nowrap;overflow-x: auto;// overflow-y: none;background-color: transparent;// transition: transform 0.5s ease;transition: scroll-left 0.3s ease; /* 添加过渡效果 */scroll-behavior: smooth; /* 添加平滑滚动效果 */.tab_item {line-height: 39px;cursor: pointer;display: inline-block;width: 180px;text-align: center;background: #f6f6f6;border-radius: 0px 0px 0px 0px;border-right: 1px solid #edecec;.close_icon:hover {color: red;}}.tab_item:hover {color: #00706b;font-weight: 700;// background-color: #edf6f6;border-radius: 8px 8px 0 0;}.active_bgi {color: #00706b;font-weight: 700;background-color: #fff;border-radius: 8px 8px 0 0;}
}/* 滚动条整体样式 */
.tab_box::-webkit-scrollbar {width: 1px; /* 竖直滚动条宽度 */height: 1px; /* 水平滚动条高度 */
}
/* 滚动条滑块 */
.tab_box::-webkit-scrollbar-thumb {background: transparent; /* 设置滑块为完全透明 */border-radius: 4px; /* 圆角滑块 */
}
/* 滚动条滑块在悬停时的样式 */
.tab_box::-webkit-scrollbar-thumb:hover {background: transparent; /* 在悬停时略微可见 */
}/* 滚动条轨道（背景） */
.tab_box::-webkit-scrollbar-track {background: transparent; /* 设置轨道为完全透明 */
}
::-webkit-scrollbar-track-piece {background-color: #fff; /* 设置轨道为完全透明 不设置不生效 */
}.popover_content {text-align: center;.popover_btn {cursor: pointer;}.popover_btn:hover {color: #00706b;font-weight: 700;}
}.ghost {opacity: 0.8;background: #aed1d1 !important;
}
</style>