脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3动态标签页及右键菜单

Vue3+Element Plus实现动态标签页以及右键菜单功能

 更新时间：2023年09月22日 11:42:52   作者：日进斗识  
这篇文章主要给大家介绍了关于Vue3+Element Plus实现动态标签页以及右键菜单功能的相关资料,Vue 3和Element Plus提供了一种简单的方法来实现侧边菜单栏与标签页之间的联动,文中通过代码介绍的非常详细,需要的朋友可以参考下

先上图

只有首页的情况

多个tab页的情况

使用el-dropdown绑定右键菜单，为每个tab页绑定一个右键

<el-tabs v-model="activeTab" @tab-click="clickTab" type="border-card" class="demo-tabs" closable @edit="removeTab">
        <el-tab-pane v-for="(item, index) in tabs" :key="item.path" :label="item.name" :name="item.path">
            <template #label>
                <el-dropdown :trigger="['contextmenu']" ref="dropdownRef" :id="item.name"
                    @visible-change="handleChange($event, item.name)">
                    {{ item.name }}
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="reload(item)" :disabled="handDisabled('reload', item, index)">
                                <el-icon>
                                    <Refresh />
                                </el-icon>重新刷新
                            </el-dropdown-item>
                            <el-dropdown-item v-if="item.path != '/welcome'" @click="closeMy(item)"
                                :disabled="handDisabled('closeMy', item, index)">
                                <el-icon>
                                    <Close />
                                </el-icon>关闭当前</el-dropdown-item>
                            <el-dropdown-item v-if="tabs.length > 1" @click="closeOther(item)"
                                :disabled="handDisabled('closeOther', item, index)">
                                <el-icon>
                                    <Remove />
                                </el-icon>关闭其他</el-dropdown-item>
                            <el-dropdown-item v-if="tabs.length > 1" @click="closeAll(item)"
                                :disabled="handDisabled('closeAll', item, index)">
                                <el-icon>
                                    <Minus />
                                </el-icon>关闭全部</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-tab-pane>
        <!--路由占位符-->
        <router-view></router-view>
    </el-tabs>

右键菜单生效后控制每个下拉项的禁用与显示(每一项代表一个功能)

const handDisabled = (action: string, data: any, index: any) => {
    if (action == 'reload') {
        return route.path != data.path
    }
    if (action == 'closeMy') {
        return route.path != data.path
    }
    if (action == 'closeOther') {
        return route.path != data.path
    }
    return false
}

每个右键项对应的功能 

const reload = (item: any) => {
    router.go(0)
}
const closeMy = (item: any) => {
    removeTab(item.path)
}
const closeOther = (item: any) => {
    const welcome = { name: "欢迎界面", path: "/welcome" }
    console.info(item)
    tabsSt.setTabs([welcome])
    const { name, path } = item
    let oldTabs: any = []
    tabs.value.forEach((element: any) => {
        oldTabs.push(element.path)
    });
    if (!oldTabs.includes(path)) {
        tabs.value.push({ name: name as any, path })
    }
}
const closeAll = (item: any) => {
    const welcome = { name: "欢迎界面", path: "/welcome", }
    tabsSt.setTabs([welcome])
    router.push('/welcome')
}

控制每次只显示一个右键

const dropdownRef = ref()
const handleChange = (visible: boolean, name: string) => {
    if (!visible) return
    dropdownRef.value.forEach((item: { id: string; handleClose: () => void }) => {
        if (item.id === name) return
        item.handleClose()
    })
}

完整代码

<template>
    <el-tabs v-model="activeTab" @tab-click="clickTab" type="border-card" class="demo-tabs" closable @edit="removeTab">
        <el-tab-pane v-for="(item, index) in tabs" :key="item.path" :label="item.name" :name="item.path">
            <template #label>
                <el-dropdown :trigger="['contextmenu']" ref="dropdownRef" :id="item.name"
                    @visible-change="handleChange($event, item.name)">
                    {{ item.name }}
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="reload(item)" :disabled="handDisabled('reload', item, index)">
                                <el-icon>
                                    <Refresh />
                                </el-icon>重新刷新
                            </el-dropdown-item>
                            <el-dropdown-item v-if="item.path != '/welcome'" @click="closeMy(item)"
                                :disabled="handDisabled('closeMy', item, index)">
                                <el-icon>
                                    <Close />
                                </el-icon>关闭当前</el-dropdown-item>
                            <el-dropdown-item v-if="tabs.length > 1" @click="closeOther(item)"
                                :disabled="handDisabled('closeOther', item, index)">
                                <el-icon>
                                    <Remove />
                                </el-icon>关闭其他</el-dropdown-item>
                            <el-dropdown-item v-if="tabs.length > 1" @click="closeAll(item)"
                                :disabled="handDisabled('closeAll', item, index)">
                                <el-icon>
                                    <Minus />
                                </el-icon>关闭全部</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-tab-pane>
        <!--路由占位符-->
        <router-view></router-view>
    </el-tabs>
</template>
<script lang="ts" setup true>
import { tabsStore } from '@/pinia/tabs';
import { homeStore } from '@/pinia/home';
import { useRoute, useRouter } from 'vue-router';
import { computed, onMounted, reactive, ref, toRef, watch } from 'vue';
import { Close, Minus, Refresh } from '@element-plus/icons-vue';
const router = useRouter();
const route = useRoute();
const tabsSt = tabsStore();
const { active, menus } = homeStore();
//tabs默认选项卡
const activeTab = ref(active)
const tabs = computed(() => {
    console.info("....初始化tabs")
    if (tabsSt.getTabs.length == 1) {
        const welcome = { name: "欢迎界面", path: "/welcome", }
        tabsSt.setTabs([welcome])
    }
    return tabsSt.getTabs
})
//设置tabs选项卡
const setActive = () => {
    activeTab.value = route.path;
}
const removeTab = (targetName: any) => {
    if (targetName === '/welcome') {
        return
    }
    const tablist = tabs.value
    let activeName = activeTab.value;
    if (activeName === targetName) {
        tablist.forEach((tab: any, index: any) => {
            if (tab.path === targetName) {
                const nextTab = tablist[index + 1] || tablist[index - 1]
                if (nextTab) {
                    activeName = nextTab.path
                }
            }
        })
    }
    activeTab.value = activeName
    tabsSt.setTabs(tablist.filter((tab: any) => tab.path !== targetName))
    router.push({ path: activeName })
}
const clickTab = (tab: any) => {
    const { props } = tab
    router.push({ path: props.name })
}
const reload = (item: any) => {
    router.go(0)
}
const closeMy = (item: any) => {
    removeTab(item.path)
}
const closeOther = (item: any) => {
    const welcome = { name: "欢迎界面", path: "/welcome" }
    console.info(item)
    tabsSt.setTabs([welcome])
    const { name, path } = item
    let oldTabs: any = []
    tabs.value.forEach((element: any) => {
        oldTabs.push(element.path)
    });
    if (!oldTabs.includes(path)) {
        tabs.value.push({ name: name as any, path })
    }
}
const closeAll = (item: any) => {
    const welcome = { name: "欢迎界面", path: "/welcome", }
    tabsSt.setTabs([welcome])
    router.push('/welcome')
}
const dropdownRef = ref()
const handleChange = (visible: boolean, name: string) => {
    if (!visible) return
    dropdownRef.value.forEach((item: { id: string; handleClose: () => void }) => {
        if (item.id === name) return
        item.handleClose()
    })
}
const handDisabled = (action: string, data: any, index: any) => {
    if (action == 'reload') {
        return route.path != data.path
    }
    if (action == 'closeMy') {
        return route.path != data.path
    }
    if (action == 'closeOther') {
        return route.path != data.path
    }
    return false
}
const addTab = () => {
    const { name, path } = route
    let oldTabs: any = []
    tabs.value.forEach((element: any) => {
        oldTabs.push(element.path)
    });
    if (!oldTabs.includes(path)) {
        tabs.value.push({ name: name as any, path })
    }
}
watch(() => route.path, () => {
    setActive();
    addTab();
})
//vuex刷新数据丢失
// const beforeRefresh = () => {
//     window.addEventListener('beforeunload', () => {
//         sessionStorage.setItem("tabsView", JSON.stringify(tabsSt.getTabs))
//     })
//     let tabSession = sessionStorage.getItem("tabsView")
//     if (tabSession) {
//         let oldTabs = JSON.parse(tabSession);
//         if (oldTabs.length > 0) {
//             tabsSt.setTabs(oldTabs)
//         }
//     }
// }
const beforeRefresh = () => {
    window.addEventListener('beforeunload', () => {
        console.info("beforeunload...")
    })
}
onMounted(() => {
    beforeRefresh();
    setActive();
})
</script>
<style lang="scss">
.demo-tabs {
    // min-height: 100vh;
    border: none;
    border-radius: 5px;
}
.el-tabs--border-card>.el-tabs__content {
    padding: 10px;
}
.el-tabs__item {
    font-size: 8px;
    font-weight: 1;
    padding: 0 8px;
}
</style>

总结

到此这篇关于Vue3+Element Plus实现动态标签页以及右键菜单功能的文章就介绍到这了,更多相关Vue3动态标签页及右键菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue如何实现动态的选中状态切换效果

    vue如何实现动态的选中状态切换效果

    这篇文章主要介绍了vue如何实现动态的选中状态切换效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue.js子组件向父组件通信的方法实例代码详解

    Vue.js子组件向父组件通信的方法实例代码详解

    这篇文章主要介绍了Vue.js子组件向父组件通信的方法实例代码，非常不错，具有一定的参考价借鉴价值，需要的朋友可以参考下
    2018-12-12
  • vue弹窗插件实战代码

    vue弹窗插件实战代码

    这篇文章主要介绍了vue弹窗插件实战代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue数据响应式原理知识点总结

    vue数据响应式原理知识点总结

    在本篇文章里小编给各位整理的是一篇关于vue数据响应式原理知识点总结，有兴趣的朋友们可以跟着学习下。
    2020-02-02
  • vue.js踩坑之ref引用细节点讲解

    vue.js踩坑之ref引用细节点讲解

    这篇文章主要介绍了vue.js踩坑之ref引用细节点讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue实现关联页面多级跳转（页面下钻）功能的完整实例

    Vue实现关联页面多级跳转（页面下钻）功能的完整实例

    这篇文章主要给大家介绍了关于Vue实现关联页面多级跳转（页面下钻）功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue element实现权限管理业务流程详解

    Vue element实现权限管理业务流程详解

    目前本人再使用vue-element-admin项目时都是通过直接删除一些用不上的路由来进行侧边栏的清除，但是其实有一个更加好的办法来对项目的侧边栏显示的内用进行管理，就是权限管理，其实也不知道这个方法好不好，原理上来说时跟直接删除该路由的方式时一样的
    2022-08-08
  • vue踩坑记之npm install报错问题解决总结

    vue踩坑记之npm install报错问题解决总结

    当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下
    2022-06-06
  • vue+echarts图表的基本使用步骤总结

    vue+echarts图表的基本使用步骤总结

    这篇文章主要给大家介绍了关于vue+echarts图表的基本使用步骤,Echarts是一款基于JavaScript的开源可视化图表库,而Vue是一种流行的JavaScript框架,用于构建用户界,需要的朋友可以参考下
    2023-11-11
  • Vue系列：通过vue-router如何传递参数示例

    Vue系列：通过vue-router如何传递参数示例

    本篇文章主要介绍了Vue系列：通过vue-router如何传递参数示例，具有一定的参考价值，有兴趣的可以了解一下。
    2017-01-01

最新评论