vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转

mirahs 的个人博客 / 16 / 0 / 创建于 3个月前

多页签添加移除方法#

编辑 src/store/fastnav.ts，添加 removeData 方法。

removeData(path: string): string {
    if (this.datas.length <= 1) return ''

    for (let i = 0; i < this.datas.length; i++) {
        const item = this.datas[i]
        if (item.path != path) continue

        this.datas.splice(i, 1)

        if (item.path != this.currPath) return ''

        return i == 0 ? this.datas[0].path : this.datas[i - 1].path
    }

    return ''
},

可移除功能#

设置 tab 可移除但当只有一个 tab 时不能移除，添加移除事件监听。

编辑 src/views/Main.vue，template 段多页签修改如下。

<el-scrollbar>
    <div class="navbar">
        <el-tag v-for="item in fastnavStore.datas" :type="item.path == fastnavStore.currPath ? 'primary' : 'info'" size="large" :closable="fastnavStore.datas.length != 1" @close="onTagClose(item.path)">
            {{ item.desc }}
        </el-tag>
    </div>
</el-scrollbar>

script 段添加 onTagClose 方法。

const onCollapseSwitch = () => {
    menuStore.collapse = !menuStore.collapse
}


const onTagClose = (path: string) => {
    const pathNew = fastnavStore.removeData(path)
    if (!pathNew) return
    router.push(pathNew)
}

浏览器测试应该可以正常关闭页签，关闭后会跳转前一个页签的路由，并且当只有一个页签时不会显示关闭按钮。

本作品采用《CC 协议》，转载必须注明作者和本文链接

280 声望

暂无个人描述~

推荐文章：

更多推荐...

vite2-electron-vadmin 一款清爽UI中后台权限管理系统|Electron-Vue3后台 12 / 3 |

基于 Vue2.0 开发的 Lumen IM 在线聊天应用 33 / 15 |

electron+vue 仿微信客户端聊天|electron 仿微信界面|electron 聊天实例 10 / 5 |

在 vue-cli 3.0 + 里面对 axios 封装 18 / 3 |

教程：使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用 49 / 13 |

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

1 篇 2025 年 4 月 15 篇 2025 年 3 月 8 篇 2025 年 2 月 18 篇 2024 年 7 月 14 篇 2024 年 6 月 43 篇 2024 年 5 月 2 篇 2024 年 4 月 9 篇 2023 年 11 月

2个月前微信小程序开发内容安全检查 2个月前 vite+vue+ts+element-plus从零开发管理后台框架(22)-路由组件缓存 3个月前 vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换 3个月前 vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转 3个月前 vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签

5 现在写从零组装一个简单的web框架系列文档会有人看吗？ 4 使用Composer从零开发一个简单的web框架(01)-项目初始化 2 使用Composer从零开发一个简单的restful框架(01)-项目初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(00)-说明

成为赞助商