黑田

根據element plus 官方的文件

當我需要做一個帶icon 的input元素時 我會需要使用類似以下的標籤

<el-input
      v-model="input3"
      class="w-50 m-2"
      size="small"
      placeholder="Please Input"
      :prefix-icon="Search"
    />

這時我會需要import 官方提供的icon component

import { Search } from '@element-plus/icons-vue'

不過呢，官方沒有提到的是，這個componenet 必須要把它作為變數，也就是要放在data中，而不是component中

data() {
      return {
        Search:Search
      }
    },

這樣元素才吃得到。我就覺得奇怪，為何input有渲染出來(class 都有渲染成element ui的class )如果單獨呼叫Search icon也都有 ，為何就是在input裡面叫不出來，原因就在這。

特典

沒有css的element ui

另外補充我今天遇到的另外一個雷，element ui 剛安裝時，似乎沒有提供css檔 難怪我的element ui 都跟官方文件長得不一樣。 很特別，特別醜。

解決方法： 引入css方法： 在終端機輸入

npm i @element-plus/theme-chalk

我是用vue3-cli 所以要在main.js中 用這種方式引入

import 'element-plus/theme-chalk/index.css'

這樣一來，我的element終於就跟官方的長得一樣了。