Sfoglia il codice sorgente

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

supine-win 2 anni fa
parent
commit
634fbbe29f

+ 11 - 4
yudao-ui-admin-vue3/src/components/Icon/src/Icon.vue

@@ -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>

+ 1 - 1
yudao-ui-admin-vue3/src/layout/components/Breadcrumb/src/Breadcrumb.vue

@@ -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)