前言：

為了適應(yīng)vue3的更新，element組件也將其內(nèi)容升級為了plus用以配套的使用，很多組件新增了更加多元的功能，但我用的時(shí)候就覺得那個icon圖標(biāo)，怎么變得特別難用呢？原來是沒有掌握正確的使用方法

改變：

// 原來
<i class="el-icon-edit"></i>
 
// plus
 <el-icon :size="size" :color="color">
   <edit></edit>
 </el-icon>

根據(jù)文檔也能看出，圖標(biāo)從原來的一個樣式封裝成了一個組件，在今后的版本迭代中可能會賦予圖標(biāo)更多的功能（目前支持尺寸和大小），這無疑是很方便的，但是在使用的時(shí)候發(fā)現(xiàn)，我的圖標(biāo)為什么顯示不出來？？？

錯誤使用：

根據(jù)教程先下載相關(guān)包

然后按需引入圖標(biāo)，并使用

 實(shí)際展示卻是：

著實(shí)讓我頭暈了好一陣，后來請教了大佬才知道，影響因素是setup的語法糖

正確使用：

使用vue3給我感覺最深的除了this基本上不使用了，就是所有內(nèi)容都被包括在setup模塊里了，扯遠(yuǎn)了，再細(xì)致的看一下element的示例，就會發(fā)現(xiàn)setup在你定義script的時(shí)候就被引入了

 這就是setup script，vue3的新語法糖，然后你按照這種格式去進(jìn)行圖標(biāo)的引入，就不會出問題了

只能說很簡單啦

setup script擴(kuò)展

但是大家也會有疑問，圖標(biāo)是能用了，但是我之前setup里面的內(nèi)容放在哪里呢？

之前的頁面邏輯都是這樣的 

 如果使用新的語法糖，export default模塊就可以完全省略了，直接在script里面寫就完事了，也可以理解為整個script都被setup模塊包裹了，在哪寫都一樣

 可以說確實(shí)省去了很多麻煩的步驟，但是這個據(jù)說還是實(shí)驗(yàn)性的功能，所以我也不敢濫用，一般都是將需要圖標(biāo)的模塊單獨(dú)放一個vue，并使用這個語法糖，然后其余功能仍然用之前的方法實(shí)現(xiàn)，避免出現(xiàn)問題會影響整個項(xiàng)目，但是如果以后可以大范圍使用了，那無疑簡化了很多操作。

如果大家對這個語法糖感興趣，可以去閱讀文檔：

Vue3 - setup script超爽體驗(yàn)，你值得一試

更新

最近的使用中發(fā)現(xiàn)其實(shí)不用這個語法糖也可以正常使用icon，寫代碼的時(shí)候我發(fā)現(xiàn)組件內(nèi)部的icon顯示就十分正常，

 所以可以通過組件化的方法直接使用，但是setup script確實(shí)是個好東西，目前來看相關(guān)頁面也沒有出現(xiàn)任何問題。

總結(jié)

到此這篇關(guān)于vue3中element-plus icon圖標(biāo)的正確使用姿勢的文章就介紹到這了,更多相關(guān)element-plus icon圖標(biāo)使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論