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