當前位置:成語大全網 - 新華字典 - element-plus,如何動態設置圖標?

element-plus,如何動態設置圖標?

其實也很簡單,我們把需要的 icon組件 註冊為全局的字典,key:組件 的形式,然後就可以把字符串轉換為圖標組件了。

首先建立壹個js文件,引入圖標,做成字典的形式,再用 Vue 的插件功能註冊為全局變量。

這裏有兩種使用方式,壹種是簡單粗暴的全部圖標都註冊了,看了壹下node_modules裏面的文件,壹***二、三百KB,如果不太在意體積的話,可以全都弄進來。

如果使用的圖標不是很多,那麽可以只引入需要的圖標,這樣體積就小很多了。

在模板裏面使用動態組件,根據圖標名稱加載圖標,使用style設置大小和顏色,這樣就可以了。

幾個例子:

el-input 的 prefix-icon 屬性可以設置圖標,屬性類型是字符串或者組件,試了壹下字符串,沒有效果,大概需要在使用 el-input 的組件裏面註冊對應的圖標,這樣就不方便實現動態圖標了,或者全局註冊圖標。

既然我們做了全局註冊的字典,那麽屬性也可以用壹用。

這樣就可以統壹使用動態圖標了。