做网站的准备,手机靓号网站建设,阜阳讯拓网站建设公司,中煤第三建设集团投标网站简介
使用 element-plus 的 el-breadcrumb 组件#xff0c;实现根据页面路由动态生成面包屑导航#xff0c;并实现面包屑导航的切换过渡动画
一、先看效果加粗样式
1.1 静态效果 1.2 动态效果 二、全量代码
script langts setup
import { ref, watch…简介
使用 element-plus 的 el-breadcrumb 组件实现根据页面路由动态生成面包屑导航并实现面包屑导航的切换过渡动画
一、先看效果加粗样式
1.1 静态效果 1.2 动态效果 二、全量代码
script langts setup
import { ref, watch } from vue;
import type { RouteLocationNormalizedLoaded } from vue-router;
import { useRouter } from vue-router;
const { currentRoute } useRouter();
const breadcrumbItems ref();
// 监听当前路由的name变化
watch(() currentRoute.value,(route: RouteLocationNormalizedLoaded) {breadcrumbItems.value route.matched;},{ immediate: true }
);
/scripttemplateel-breadcrumb separator/transition-group namebreadcrumbel-breadcrumb-item:keyitem.pathv-foritem in breadcrumbItems:to{ path: ${item.path} }classbreadcrumb-item{{ item.meta.title }}/el-breadcrumb-item/transition-group/el-breadcrumb
/templatestyle langscss
.el-breadcrumb {height: 48px;line-height: 48px;margin-left: 16px;
}
.el-breadcrumb__inner,
.el-breadcrumb__inner a {font-weight: 400 !important;
}/* 面包屑过渡动画 */
.breadcrumb-enter-active {transition: all 0.4s;
}.breadcrumb-leave-active {transition: all 0.3s;
}.breadcrumb-enter-from,
.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);
}.breadcrumb-leave-active {position: absolute;
}
/style
