vue3中element-plus icon圖示的正確使用姿勢

2022-03-30 19:03:09

前言：

為了適應vue3的更新，element元件也將其內容升級為了plus用以配套的使用，很多元件新增了更加多元的功能，但我用的時候就覺得那個icon圖示，怎麼變得特別難用呢？原來是沒有掌握正確的使用方法

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

根據檔案也能看出，圖示從原來的一個樣式封裝成了一個元件，在今後的版本迭代中可能會賦予圖示更多的功能（目前支援尺寸和大小），這無疑是很方便的，但是在使用的時候發現，我的圖示為什麼顯示不出來？？？

根據教學先下載相關包

然後按需引入圖示，並使用

實際展示卻是：

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

使用vue3給我感覺最深的除了this基本上不使用了，就是所有內容都被包括在setup模組裡了，扯遠了，再細緻的看一下element的範例，就會發現setup在你定義script的時候就被引入了

這就是setup script，vue3的新語法糖，然後你按照這種格式去進行圖示的引入，就不會出問題了

只能說很簡單啦

但是大家也會有疑問，圖示是能用了，但是我之前setup裡面的內容放在哪裡呢？

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

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

可以說確實省去了很多麻煩的步驟，但是這個據說還是實驗性的功能，所以我也不敢濫用，一般都是將需要圖示的模組單獨放一個vue，並使用這個語法糖，然後其餘功能仍然用之前的方法實現，避免出現問題會影響整個專案，但是如果以後可以大範圍使用了，那無疑簡化了很多操作。

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

最近的使用中發現其實不用這個語法糖也可以正常使用icon，寫程式碼的時候我發現元件內部的icon顯示就十分正常，

所以可以通過元件化的方法直接使用，但是setup script確實是個好東西，目前來看相關頁面也沒有出現任何問題。

到此這篇關於vue3中element-plus icon圖示的正確使用姿勢的文章就介紹到這了,更多相關element-plus icon圖示使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！