wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

面包屑移除动画

Browse Source
This commit is contained in:
不做码农 2022-05-21 11:15:02 +08:00
parent a2178731e2
commit 945f764249
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Breadcrumb/index.vue
View File

@ -1,30 +1,31 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <!-- <transition-group name="breadcrumb"> -->
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span> <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> <!-- </transition-group> -->
</el-breadcrumb> </el-breadcrumb>
</template> </template>
<script setup> <script setup>
const route = useRoute(); const route = useRoute()
const router = useRouter(); const router = useRouter()
const levelList = ref([]) const levelList = ref([])
function getBreadcrumb() { function getBreadcrumb() {
// only show routes with meta.title // only show routes with meta.title
let matched = route.matched.filter(item => item.meta && item.meta.title); let matched = route.matched.filter((item) => item.meta && item.meta.title)
const first = matched[0] // const first = matched[0]
// 判断是否为首页 // 判断是否为首页
// if (!isDashboard(first)) { // if (!isDashboard(first)) {
// matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched) // matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
// } // }
levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
} }
function isDashboard(route) { function isDashboard(route) {
const name = route && route.name const name = route && route.name
if (!name) { if (!name) {
@ -48,10 +49,10 @@ watchEffect(() => {
} }
getBreadcrumb() getBreadcrumb()
}) })
getBreadcrumb(); getBreadcrumb()
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb { .app-breadcrumb.el-breadcrumb {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
@ -63,7 +64,7 @@ getBreadcrumb();
cursor: text; cursor: text;
} }
} }
.mobile .app-breadcrumb.el-breadcrumb{ .mobile .app-breadcrumb.el-breadcrumb {
display: none; display: none;
} }
</style> </style>