zq
2 days ago
12 changed files with 1137 additions and 193 deletions
File diff suppressed because it is too large
@ -0,0 +1,7 @@ |
|||||
|
import Breadcrumb from './src/index.vue' |
||||
|
|
||||
|
Breadcrumb.install = function(Vue) { |
||||
|
Vue.component(Breadcrumb.name || 'Breadcrumb', Breadcrumb) |
||||
|
} |
||||
|
|
||||
|
export default Breadcrumb |
||||
@ -0,0 +1,160 @@ |
|||||
|
<template> |
||||
|
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between"> |
||||
|
<nav> |
||||
|
<ol class="breadcrumb"> |
||||
|
<li |
||||
|
v-for="(item, index) in breadcrumbs" |
||||
|
:key="index" |
||||
|
class="breadcrumb-item" |
||||
|
:class="{ active: index === breadcrumbs.length - 1 }" |
||||
|
> |
||||
|
<template v-if="index !== breadcrumbs.length - 1"> |
||||
|
<router-link to="/" v-if="item.title == '首页'"> |
||||
|
<SvgIcon1 :iconPath="require(`../../assets/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/> |
||||
|
</router-link> |
||||
|
<router-link v-else :to="item.path">{{ item.title }}</router-link> |
||||
|
<img class="separator" src="../../assets/separator.png" alt=""> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<span>{{ item.title }}</span> |
||||
|
</template> |
||||
|
</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
<div v-if="breadRightText" class="gap8 breadRight"> |
||||
|
<img class="ml-8" src="../../assets/bind_sites.svg" alt="" /> |
||||
|
站点简称：<a :href="breadRightText">{{ breadRightText }}</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import SvgIcon1 from '../..//SvgIcon1'; |
||||
|
export default { |
||||
|
name: 'Breadcrumb', |
||||
|
components: { |
||||
|
SvgIcon1, |
||||
|
}, |
||||
|
computed: { |
||||
|
breadcrumbs() { |
||||
|
if (this.$route.meta.hideBreadcrumb) return []; |
||||
|
|
||||
|
const crumbs = []; |
||||
|
let currentRoute = this.$route; |
||||
|
|
||||
|
// 递归查找所有父级路由 |
||||
|
while (currentRoute) { |
||||
|
// 获取匹配的路由记录 |
||||
|
// const matchedRoute = this.$router.options.routes.find( |
||||
|
// r => r.name === currentRoute.name |
||||
|
// ); |
||||
|
|
||||
|
// 构建包含完整参数的对象 |
||||
|
const routeWithParams = { |
||||
|
path: currentRoute.path, |
||||
|
query: currentRoute.query, |
||||
|
params: currentRoute.params |
||||
|
}; |
||||
|
|
||||
|
crumbs.unshift({ |
||||
|
path: routeWithParams, |
||||
|
title: this.getTitle(currentRoute) |
||||
|
}); |
||||
|
|
||||
|
// 通过 meta.breadcrumbParent 查找父级路由 |
||||
|
if (currentRoute.meta.breadcrumbParent) { |
||||
|
currentRoute = this.$router.options.routes.find( |
||||
|
r => r.name === currentRoute.meta.breadcrumbParent |
||||
|
); |
||||
|
|
||||
|
// 如果找到了父路由，创建一个模拟的$route对象 |
||||
|
if (currentRoute) { |
||||
|
currentRoute = { |
||||
|
...currentRoute, |
||||
|
path: currentRoute.path, |
||||
|
query: this.$route.query, // 保留当前查询参数 |
||||
|
params: this.$route.params, // 保留当前路由参数 |
||||
|
meta: currentRoute.meta || {} |
||||
|
}; |
||||
|
} |
||||
|
} else { |
||||
|
currentRoute = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return crumbs; |
||||
|
}, |
||||
|
breadRightText() { |
||||
|
return this.$store && this.$store.state.breadRightText |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getTitle(route) { |
||||
|
return typeof route.meta.title === 'function' |
||||
|
? route.meta.title(route) |
||||
|
: route.meta.title || route.name; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
/* 保持之前的样式不变 */ |
||||
|
.breadcrumb-container { |
||||
|
padding: 16px 12px; |
||||
|
background-color: #f5f5f5; |
||||
|
border-radius: 4px; |
||||
|
.breadRight{ |
||||
|
a{ |
||||
|
text-decoration: none; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.home-icon { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.breadcrumb { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
height: 22px; |
||||
|
align-items: center; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
.breadcrumb-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.router-link-active { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.breadcrumb-item a { |
||||
|
color: #626573; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.breadcrumb-item.active span { |
||||
|
color: #1E2226; |
||||
|
; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.separator { |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,7 @@ |
|||||
|
import SvgIcon1 from './src/index.vue' |
||||
|
|
||||
|
SvgIcon1.install = function(Vue) { |
||||
|
Vue.component(SvgIcon1.name || 'SvgIcon1', SvgIcon1) |
||||
|
} |
||||
|
|
||||
|
export default SvgIcon1 |
||||
@ -0,0 +1,175 @@ |
|||||
|
<template> |
||||
|
<div class="svg-icon-wrapper" :style="wrapperStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"> |
||||
|
<div class="svg-icon" v-html="svgContent" :style="{ |
||||
|
'--icon-color': (hoverEffect || isActive) ? activeColor : defaultColor, |
||||
|
'--icon-hover-color': activeColor |
||||
|
}"></div> |
||||
|
<!-- :style="iconStyle" --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'SvgIcon1', |
||||
|
props: { |
||||
|
// 图标路径（必须） |
||||
|
iconPath: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
// 默认颜色 |
||||
|
defaultColor: { |
||||
|
type: String, |
||||
|
default: '#606266' |
||||
|
}, |
||||
|
// 激活颜色（传入后才允许变色） |
||||
|
activeColor: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 是否开启悬停变色 |
||||
|
hoverEffect: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 图标大小 |
||||
|
size: { |
||||
|
type: [String, Number], |
||||
|
default: '14px' |
||||
|
}, |
||||
|
// 是否当前激活状态 |
||||
|
isActive: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
svgContent: '', |
||||
|
isHovering: false, |
||||
|
currentColor: this.defaultColor |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
wrapperStyle() { |
||||
|
return { |
||||
|
width: typeof this.size === 'number' ? `${this.size}px` : this.size, |
||||
|
height: typeof this.size === 'number' ? `${this.size}px` : this.size, |
||||
|
display: 'inline-flex', |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center' |
||||
|
} |
||||
|
}, |
||||
|
iconStyle() { |
||||
|
return { |
||||
|
width: '100%', |
||||
|
height: '100%', |
||||
|
color: this.currentColor, |
||||
|
transition: 'color 0.3s ease' |
||||
|
} |
||||
|
}, |
||||
|
shouldChangeColor() { |
||||
|
return this.activeColor && (this.hoverEffect || this.isActive) |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
isActive(newVal) { |
||||
|
console.log(newVal, 'newVal---'); |
||||
|
if (this.shouldChangeColor) { |
||||
|
this.currentColor = newVal ? this.activeColor : this.defaultColor |
||||
|
console.log(this.currentColor, 'this.currentColor--'); |
||||
|
} |
||||
|
}, |
||||
|
defaultColor(newVal) { |
||||
|
if (!this.isHovering && !this.isActive) { |
||||
|
this.currentColor = newVal |
||||
|
} |
||||
|
}, |
||||
|
activeColor() { |
||||
|
this.updateColorState() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
async loadSvg() { |
||||
|
try { |
||||
|
const response = await fetch(this.iconPath) |
||||
|
this.svgContent = await response.text() |
||||
|
this.processSvg() |
||||
|
} catch (error) { |
||||
|
console.error('Failed to load SVG:', error) |
||||
|
} |
||||
|
}, |
||||
|
processSvg() { |
||||
|
// 确保SVG没有自带颜色，以便用CSS控制 |
||||
|
this.$nextTick(() => { |
||||
|
const svgElement = this.$el.querySelector('svg') |
||||
|
if (svgElement) { |
||||
|
// 更彻底地移除颜色属性 |
||||
|
svgElement.removeAttribute('fill') |
||||
|
svgElement.removeAttribute('style') |
||||
|
const paths = svgElement.querySelectorAll('path, circle, rect, polygon') |
||||
|
paths.forEach(el => { |
||||
|
el.removeAttribute('fill') |
||||
|
}) |
||||
|
svgElement.style.fill = 'currentColor' |
||||
|
svgElement.style.width = '100%' |
||||
|
svgElement.style.height = '100%' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleMouseEnter() { |
||||
|
this.isHovering = true |
||||
|
this.updateColorState() |
||||
|
}, |
||||
|
handleMouseLeave() { |
||||
|
this.isHovering = false |
||||
|
this.updateColorState() |
||||
|
}, |
||||
|
updateColorState() { |
||||
|
if (this.activeColor) { |
||||
|
if (this.isActive) { |
||||
|
this.currentColor = this.activeColor |
||||
|
} else { |
||||
|
this.currentColor = this.isHovering && this.hoverEffect ? |
||||
|
this.activeColor : |
||||
|
this.defaultColor |
||||
|
} |
||||
|
} else { |
||||
|
this.currentColor = this.defaultColor |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.loadSvg() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.svg-icon-wrapper { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.svg-icon { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: var(--icon-color); |
||||
|
transition: color 0.3s; |
||||
|
} |
||||
|
|
||||
|
.svg-icon:hover { |
||||
|
color: var(--icon-hover-color); |
||||
|
} |
||||
|
|
||||
|
.svg-icon { |
||||
|
display: inline-flex; |
||||
|
} |
||||
|
|
||||
|
.svg-icon>>>svg { |
||||
|
fill: currentColor; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 662 B |
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
plugins: [ |
||||
|
require('autoprefixer')({ grid: true }) |
||||
|
] |
||||
|
} |
||||
Loading…
Reference in new issue