!333 fix:yudao-ui-admin-vue3面包屑导航图标和文字不在同一水平线

Merge pull request !333 from supine-win/master
This commit is contained in:
芋道源码 2022-12-15 11:03:51 +00:00 committed by Gitee
commit 8ddb79b800
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
2 changed files with 12 additions and 5 deletions

View File

@ -15,7 +15,9 @@ const props = defineProps({
// icon color
color: propTypes.string,
// icon size
size: propTypes.number.def(16)
size: propTypes.number.def(16),
// icon svg class
svgClass: propTypes.string.def('')
})
const elRef = ref<ElRef>(null)
@ -34,6 +36,11 @@ const getIconifyStyle = computed(() => {
}
})
const getSvgClass = computed(() => {
const { svgClass } = props
return `iconify ${svgClass}`
})
const updateIcon = async (icon: string) => {
if (unref(isLocal)) return
@ -66,13 +73,13 @@ watch(
</script>
<template>
<ElIcon :class="prefixCls" :size="size" :color="color">
<svg v-if="isLocal" aria-hidden="true">
<ElIcon :class="prefixCls" :color="color" :size="size">
<svg v-if="isLocal" aria-hidden="true" :class="getSvgClass">
<use :xlink:href="symbolId" />
</svg>
<span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
<span class="iconify" :data-icon="symbolId"></span>
<span :class="getSvgClass" :data-icon="symbolId"></span>
</span>
</ElIcon>
</template>

View File

@ -53,7 +53,7 @@ export default defineComponent({
<ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
{meta?.icon && breadcrumbIcon.value ? (
<>
<Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
<Icon icon={meta.icon} class="mr-[2px]" svgClass="inline-block"></Icon> {t(v?.meta?.title)}
</>
) : (
t(v?.meta?.title)