vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换

最新推荐文章于 2025-04-20 12:10:49 发布

原创最新推荐文章于 2025-04-20 12:10:49 发布 · 195 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

收录于

vite+vue+ts+element从零开发管理后台框架专栏收录该内容

23 篇文章

订阅专栏

编辑src/views/Main.vue，script段添加onTagClick方法

const onTagClick = (path: string) => {
    if (path == fastnavStore.currPath) return
    router.push(path)
}

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

tmplate段添加点击事件回调

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

浏览器测试点击不同的页签可以切换了