<template>
|
<el-icon v-if="icon" v-bind="$attrs" :class="[legacyClass, iconClass]">
|
<component :is="icon" />
|
</el-icon>
|
</template>
|
|
<script>
|
import { getLimsIcon } from '@/utils/lims-icon'
|
|
/**
|
* 旧版图标用法 `<i class="el-icon-xxx">` 的替代品。
|
* 通过 name 指定旧图标名，其余属性（style / class / @click 等）原样透传到 <el-icon> 上。
|
*
|
* 另外会在根节点上补回旧类名 `el-icon-xxx`：业务样式里有 15 处
|
* `.el-icon-xxx { color/font-size/... }` 的覆盖规则，补回同名 class 才能继续生效。
|
* element-plus 已无图标字体，不存在同名规则冲突。
|
*/
|
export default defineComponent({
|
name: 'LimsIcon',
|
inheritAttrs: false,
|
props: {
|
// 旧版 element-ui 图标名，如 'el-icon-search'（也接受 'search'）
|
name: {
|
type: String,
|
required: true
|
}
|
},
|
setup(props) {
|
const key = computed(() => String(props.name || '').replace(/^el-icon-/, ''))
|
return {
|
icon: computed(() => getLimsIcon(props.name)),
|
// 旧类名兼容（见组件注释）
|
legacyClass: computed(() => (key.value ? `el-icon-${key.value}` : '')),
|
// element-ui 的 el-icon-loading 自带旋转动画，EP 需要显式加 is-loading
|
iconClass: computed(() => (key.value === 'loading' ? 'is-loading' : ''))
|
}
|
}
|
})
|
</script>
|
