Commit 8ddb79b800a3a8c33f0570e2d1e20e470eb395df
Committed by
Gitee
Gitee
!333 fix:yudao-ui-admin-vue3面包屑导航图标和文字不在同一水平线
Merge pull request !333 from supine-win/master
Showing
2 changed files
with
12 additions
and
5 deletions
yudao-ui-admin-vue3/src/components/Icon/src/Icon.vue
| @@ -15,7 +15,9 @@ const props = defineProps({ | @@ -15,7 +15,9 @@ const props = defineProps({ | ||
| 15 | // icon color | 15 | // icon color |
| 16 | color: propTypes.string, | 16 | color: propTypes.string, |
| 17 | // icon size | 17 | // icon size |
| 18 | - size: propTypes.number.def(16) | 18 | + size: propTypes.number.def(16), |
| 19 | + // icon svg class | ||
| 20 | + svgClass: propTypes.string.def('') | ||
| 19 | }) | 21 | }) |
| 20 | 22 | ||
| 21 | const elRef = ref<ElRef>(null) | 23 | const elRef = ref<ElRef>(null) |
| @@ -34,6 +36,11 @@ const getIconifyStyle = computed(() => { | @@ -34,6 +36,11 @@ const getIconifyStyle = computed(() => { | ||
| 34 | } | 36 | } |
| 35 | }) | 37 | }) |
| 36 | 38 | ||
| 39 | +const getSvgClass = computed(() => { | ||
| 40 | + const { svgClass } = props | ||
| 41 | + return `iconify ${svgClass}` | ||
| 42 | +}) | ||
| 43 | + | ||
| 37 | const updateIcon = async (icon: string) => { | 44 | const updateIcon = async (icon: string) => { |
| 38 | if (unref(isLocal)) return | 45 | if (unref(isLocal)) return |
| 39 | 46 | ||
| @@ -66,13 +73,13 @@ watch( | @@ -66,13 +73,13 @@ watch( | ||
| 66 | </script> | 73 | </script> |
| 67 | 74 | ||
| 68 | <template> | 75 | <template> |
| 69 | - <ElIcon :class="prefixCls" :size="size" :color="color"> | ||
| 70 | - <svg v-if="isLocal" aria-hidden="true"> | 76 | + <ElIcon :class="prefixCls" :color="color" :size="size"> |
| 77 | + <svg v-if="isLocal" aria-hidden="true" :class="getSvgClass"> | ||
| 71 | <use :xlink:href="symbolId" /> | 78 | <use :xlink:href="symbolId" /> |
| 72 | </svg> | 79 | </svg> |
| 73 | 80 | ||
| 74 | <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle"> | 81 | <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle"> |
| 75 | - <span class="iconify" :data-icon="symbolId"></span> | 82 | + <span :class="getSvgClass" :data-icon="symbolId"></span> |
| 76 | </span> | 83 | </span> |
| 77 | </ElIcon> | 84 | </ElIcon> |
| 78 | </template> | 85 | </template> |
yudao-ui-admin-vue3/src/layout/components/Breadcrumb/src/Breadcrumb.vue
| @@ -53,7 +53,7 @@ export default defineComponent({ | @@ -53,7 +53,7 @@ export default defineComponent({ | ||
| 53 | <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}> | 53 | <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}> |
| 54 | {meta?.icon && breadcrumbIcon.value ? ( | 54 | {meta?.icon && breadcrumbIcon.value ? ( |
| 55 | <> | 55 | <> |
| 56 | - <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)} | 56 | + <Icon icon={meta.icon} class="mr-[2px]" svgClass="inline-block"></Icon> {t(v?.meta?.title)} |
| 57 | </> | 57 | </> |
| 58 | ) : ( | 58 | ) : ( |
| 59 | t(v?.meta?.title) | 59 | t(v?.meta?.title) |