!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 // icon color
color: propTypes.string, color: propTypes.string,
// icon size // icon size
size: propTypes.number.def(16) size: propTypes.number.def(16),
// icon svg class
svgClass: propTypes.string.def('')
}) })
const elRef = ref<ElRef>(null) 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) => { const updateIcon = async (icon: string) => {
if (unref(isLocal)) return if (unref(isLocal)) return
@ -66,13 +73,13 @@ watch(
</script> </script>
<template> <template>
<ElIcon :class="prefixCls" :size="size" :color="color"> <ElIcon :class="prefixCls" :color="color" :size="size">
<svg v-if="isLocal" aria-hidden="true"> <svg v-if="isLocal" aria-hidden="true" :class="getSvgClass">
<use :xlink:href="symbolId" /> <use :xlink:href="symbolId" />
</svg> </svg>
<span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle"> <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> </span>
</ElIcon> </ElIcon>
</template> </template>

View File

@ -53,7 +53,7 @@ export default defineComponent({
<ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}> <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
{meta?.icon && breadcrumbIcon.value ? ( {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) t(v?.meta?.title)