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 | 15 | // icon color |
| 16 | 16 | color: propTypes.string, |
| 17 | 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 | 23 | const elRef = ref<ElRef>(null) |
| ... | ... | @@ -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 | 44 | const updateIcon = async (icon: string) => { |
| 38 | 45 | if (unref(isLocal)) return |
| 39 | 46 | |
| ... | ... | @@ -66,13 +73,13 @@ watch( |
| 66 | 73 | </script> |
| 67 | 74 | |
| 68 | 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 | 78 | <use :xlink:href="symbolId" /> |
| 72 | 79 | </svg> |
| 73 | 80 | |
| 74 | 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 | 83 | </span> |
| 77 | 84 | </ElIcon> |
| 78 | 85 | </template> | ... | ... |
yudao-ui-admin-vue3/src/layout/components/Breadcrumb/src/Breadcrumb.vue
| ... | ... | @@ -53,7 +53,7 @@ export default defineComponent({ |
| 53 | 53 | <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}> |
| 54 | 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 | 59 | t(v?.meta?.title) | ... | ... |