wordpress 源码剖析,网站关键词排名优化,中咨城建设计南京网站,logo是黑色 怎么调网站的色调简介
使用 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
