elementPlus使用icon图标不显示解决方法

近期在学习Vue时用elementUI时发现icon在页面上显示不出来,根据官方文档上的用法都显示不出来,听说在文档更新后好像不可以直接使用,需要引用。

正常按照文档标签使用(icon图标未显示)

 <el-input :prefix-icon="Key" v-model="**"style="width: 50%" placeholder="请输入验证码">
 <el-icon :size="20">
      <Key />
 </el-icon>
 </el-input>

elementPlus使用icon图标不显示解决方法_第1张图片

解决方法

首先按照文档安装
1.

npm install @element-plus/icons-vue
       <el-input :prefix-icon="Key" v-model="**" placeholder="请输入验证码">
                 <template #prefix>
                    <el-icon class="el-input__icon"><Key /></el-icon>
                  </template>
       </el-input>

其中标签为icon为名称,可在文档中查看自己需要的icon进行更改。
3.

import  Key  from "@element-plus/icons";

将Key的icon引入后在components里加入

  components:{
    Key
  },

然后就可以啦~效果图附上…
elementPlus使用icon图标不显示解决方法_第2张图片
当然可能不是唯一的方法,此为借鉴(根据使用版本而异)

你可能感兴趣的:(vue,vue.js,前端,elementui)