深圳网站建设服务找哪家,高清视频网络服务器免费,网站开发去哪里培训,太原网站建设最好简介
使用 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
