解决Vue3+Element-plus在input框使用属性方式添加图标不显示

Ac⁠

已于 2024-08-06 10:27:46 修改

阅读量172

点赞数 3

文章标签： vue.js javascript 前端

于 2024-08-06 10:24:22 首次发布

本文链接：https://blog.csdn.net/CharleneD/article/details/126248363

版权

elementplus-icon官网文档:https://element-plus.org/zh-CN/component/icon.html

新版elementplus+Vue3需要先从 @element-plus/icons-vue 中导入所有图标并进行全局注册
在main.js文件下添加如下代码：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

然后在视图里面按需要可以直接使用了，若无法使用再在组件内导入所需图标

import { Avator,Lock } from '@element-plus/icons-vue'


<el-input v-model="form.username" prefix-icon="Avatar"/>
<el-input v-model="form.password" prefix-icon="Lock" show-password/>