element-plus 里面的 icon,以前是字符串形式的,非常容易做成动态的效果,但是新版本改成了组件的形式,不支持字符串的形式了。
组件了如何动态呢?
其实也很简单,我们把需要的 icon组件 注册为全局的字典,key:组件 的形式,然后就可以把字符串转换为图标组件了。
全局注册
首先建立一个js文件,引入图标,做成字典的形式,再用 Vue 的插件功能注册为全局变量。
import { reactive } from 'vue'
// 引入全部图标
// import * as Icons from "@element-plus/icons"
// 按需引入图标
import {
CloseBold,
Close,
Plus,
Star,
UserFilled,
Loading,
Connection,
Edit,
FolderOpened
} from '@element-plus/icons'
const dictIcon = reactive({
'CloseBold': CloseBold,
'Close': Close,
'Plus': Plus,
'Star': Star,
'UserFilled': UserFilled,
'Loading': Loading,
'Connection': Connection,
'Edit': Edit,
'FolderOpened': FolderOpened
})
const installIcon = (app) => {
// 便于模板获取
app.config.globalProperties.$icon = dictIcon
// 使用全部图标
// app.config.globalProperties.$icon = Icons
}
export default installIcon
使用全部图标
这里有两种使用方式,一种是简单粗暴的全部图标都注册了,看了一下node_modules里面的文件,一共二、三百KB,如果不太在意体积的话,可以全都弄进来。
按需索取
如果使用的图标不是很多,那么可以只引入需要的图标,这样体积就小很多了。
在 main.js 里面挂载。
// 设置icon
import installIcon from './icon/index.js'
app.use(nfElementPlus) // 全局注册
.use(router) // 路由
.use(installIcon) // 注册全局图标
.use(ElementPlus, { locale: zhCn, size: 'small' }) // UI库
.mount('#app')
在模板里面使用
<component
:is="$icon[iconName]"
style="width: 1.5em; height: 1.5em; margin-right: 8px;color:#123456"
>
</component>
在模板里面使用动态组件,根据图标名称加载图标,使用style设置大小和颜色,这样就可以了。
在组件属性里面使用
几个例子:
el-input 的 prefix-icon 属性可以设置图标,属性类型是字符串或者组件,试了一下字符串,没有效果,大概需要在使用 el-input 的组件里面注册对应的图标,这样就不方便实现动态图标了,或者全局注册图标。
既然我们做了全局注册的字典,那么属性也可以用一用。
<el-input
v-model="value"
:prefix-icon="($icon)?$icon['Edit']:'' "
:suffix-icon="($icon)?$icon[iconName]:'' "
>
</el-input>
这样就可以统一使用动态图标了。
网友评论