Vue3面包屑（Breadcrumb）

Vue2面包屑Breadcrumb可自定义设置以下属性router 的路由数组routes类型Array{name: string, path?: string, query?: { [propName: string]: any } }默认 []设置面包屑类名breadcrumbClass类型string默认 undefined设置面包屑样式breadcrumbStyle类型CSSProperties默认 {}设置文本最大显示宽度超出后显示省略号maxWidth类型string | number单位 px默认 100%自定义分隔符separator类型string | slot默认 undefined默认使用 分隔设置分隔符样式separatorStyle类型CSSProperties默认 {}如何打开目标URL当前窗口或新窗口target类型_self | _blank默认 _self效果如下图在线预览①创建面包屑组件Breadcrumb.vuescript setup langts import { computed } from vue import type { CSSProperties } from vue export interface Query { [propName: string]: any // 添加一个字符串索引签名用于包含带有任意数量的其他属性 } export interface Route { name: string // 路由名称 path?: string // 路由地址 query?: Query // 路由查询参数 } export interface Props { routes?: Route[] // router 路由数组 breadcrumbClass?: string // 设置面包屑类名 breadcrumbStyle?: CSSProperties // 设置面包屑样式 maxWidth?: string | number // 设置文本最大显示宽度超出后显示省略号单位 px separator?: string // 自定义分隔符默认为 string | slot separatorStyle?: CSSProperties // 设置分隔符样式 target?: _self | _blank // 如何打开目标 URL当前窗口或新窗口 } const props withDefaults(definePropsProps(), { routes: () [], breadcrumbClass: undefined, breadcrumbStyle: () ({}), maxWidth: 100%, separator: undefined, separatorStyle: () ({}), target: _self }) const breadcrumbAmount computed(() { return props.routes.length }) function getTargetUrl(route: Route): string { let targetUrl: string if (route.path) { targetUrl route.path } if (route.query JSON.stringify(route.query) ! {}) { const query route.query Object.keys(query).forEach((param, index) { if (index 0) { targetUrl targetUrl ? param query[param] } else { targetUrl targetUrl param query[param] } }) } return targetUrl } /script template div classbreadcrumb-wrap :classbreadcrumbClass :style[ --breadcrumb-color: rgba(0, 0, 0, 0.45); --breadcrumb-bg-color-hover: rgba(0, 0, 0, 0.06); --breadcrumb-color-hover: rgba(0, 0, 0, 0.88); --breadcrumb-color-active: rgba(0, 0, 0, 0.88); --breadcrumb-padding: 0 4px; --breadcrumb-border-radius: 4px; --breadcrumb-separator-color: rgba(0, 0, 0, 0.45); , breadcrumbStyle ] div classbreadcrumb-item v-for(route, index) in routes :keyindex component :isroute.path ? a : span classbreadcrumb-link :class{ link-hover: route.path, link-active: index breadcrumbAmount - 1 } :stylemax-width: ${maxWidth}px; :hrefgetTargetUrl(route) :targettarget :titleroute.name {{ route.name }} /component span v-ifindex breadcrumbAmount - 1 classbreadcrumb-separator :styleseparatorStyle slot nameseparator :routeroute :indexindex span v-ifseparator{{ separator }}/span svg v-else focusablefalse >script setup langts import Breadcrumb from ./Breadcrumb.vue import { ref } from vue import { ArrowRightOutlined, DoubleRightOutlined } from ant-design/icons-vue import type { BreadcrumbRoute } from vue-amazing-ui const routes refBreadcrumbRoute[]([ { name: 一级路由, path: /first }, { name: 二级路由, path: /second, query: { id: 1, tab: 2 } }, { name: 三级路由 } ]) const longNameRoutes refBreadcrumbRoute[]([ { name: 一级路由 }, { name: 二级路由, path: /second, query: { id: 1, tab: 2 } }, { name: 我是一个名字超长的三级路由 } ]) const customStyle { --breadcrumb-color: rgba(0, 0, 0, 0.65), --breadcrumb-bg-color-hover: rgba(0, 0, 0, 0.1), --breadcrumb-color-hover: #ff6900, --breadcrumb-color-active: #ff6900, --breadcrumb-padding: 4px 8px, --breadcrumb-border-radius: 8px, --breadcrumb-separator-color: rgba(0, 0, 0, 0.65) } /script template div h1{{ $route.name }} {{ $route.meta.title }}/h1 h2 classmt30 mb10基本使用/h2 Breadcrumb :routesroutes / h2 classmt30 mb10自定义分隔符/h2 Flex vertical Breadcrumb :routesroutes separator/ / Breadcrumb :routesroutes template #separator ArrowRightOutlined / /template /Breadcrumb Breadcrumb :routesroutes template #separator DoubleRightOutlined / /template /Breadcrumb /Flex h2 classmt30 mb10自定义样式/h2 Flex vertical Breadcrumb :routeslongNameRoutes breadcrumb-classcustom-breadcrumb-class :max-width210 :stylecustomStyle / Breadcrumb :routeslongNameRoutes :max-width210 :breadcrumb-style{ fontSize: 20px } :stylecustomStyle / Breadcrumb :routeslongNameRoutes :breadcrumb-style{ fontSize: 20px, height: 40px } :separator-style{ fontSize: 18px } :max-width210 / Breadcrumb :routeslongNameRoutes :breadcrumb-style{ fontSize: 20px, height: 40px } :separator-style{ fontSize: 18px } :max-width210 template #separator ArrowRightOutlined / /template /Breadcrumb Breadcrumb :routeslongNameRoutes :breadcrumb-style{ fontSize: 20px, height: 40px } :separator-style{ fontSize: 18px } :max-width210 template #separator{ index } ArrowRightOutlined v-ifindex 0 / DoubleRightOutlined v-ifindex 1 / /template /Breadcrumb /Flex h2 classmt30 mb10新页面打开目标链接/h2 Breadcrumb :routesroutes target_blank / /div /template style langless scoped .custom-breadcrumb-class { font-size: 20px; color: #1677ff; height: 40px; :deep(.breadcrumb-item) { .breadcrumb-link { color: rgba(22, 119, 255, 0.72); padding: 0 8px; border-radius: 8px; } .link-hover { :hover { color: #fff; background: #4096ff; } } .link-active { color: #1677ff; } .breadcrumb-separator { color: rgba(22, 119, 255, 0.72); } } } /style