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

目录

先上图

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

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

每个右键项对应的功能 

控制每次只显示一个右键

完整代码

---

先上图

        只有首页的情况

        多个tab页的情况

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

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

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()
    })
}

完整代码