解决Vue3+Element-plus在input框使用属性方式添加图标不显示的问题
element-plus
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
项目地址:https://gitcode.com/gh_mirrors/el/element-plus
免费下载资源
·
今天打算用Vue3做个项目,做到登录时打算在input输入框添加图标,然而引用官方的例子发现,图标不显示,在codepen.io编辑平台也不显示。。。通过一顿摸索发现,Element-plus的图标需要按需引入,而且要进行注册(着实有点麻烦呢),但也只能这样做了。以下是具体说明:
1.首先图标要按需引入
// 一个用户图像+密码锁图标
import { Avatar, Lock } from "@element-plus/icons-vue";
2.引用的图标要通过Setup进行注册(最核心的一点)
千万不要用components,不要问为啥,因为这是在Vue3中,新引入的Avatar, Lock要注册到全局,使之变成响应式。
setup(){
return {
Avatar,
Lock
}
}
3.在el-input的属性中通过绑定的方式使用就ok了。
...
<el-form-item label="">
<el-input v-model="form.name" :prefix-icon="Avatar"></el-input>
</el-form-item>
<el-form-item label="">
<el-input v-model="form.pass" :prefix-icon="Lock" type="password"></el-input>
</el-form-item>
...
以下是效果图:
GitHub 加速计划 / el / element-plus
23.88 K
15.38 K
下载
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
最近提交(Master分支:1 个月前 )
c1863f50
2 个月前
b55163fd
2 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)