汽车电商网站建设,建设信用卡申请官方网站,网站开发需求文档怎么写,群晖 网站建设简介
使用 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
