vue3+element-plus的el-icon 组件使用

最新推荐文章于 2024-05-04 03:05:58 发布

乙火

最新推荐文章于 2024-05-04 03:05:58 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue.js vue elementui

本文链接：https://blog.csdn.net/tianchoy/article/details/123689818

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

使用 element-plus 时发现了一个问题：icon 需要单独安装和引入,所以尝试了一下发现可行，记录一下

1.安装

$ yarn add @element-plus/icons 
# 或者 
$ npm install @element-plus/icons

2.引入

<script setup lang='ts'>
import { reactive } from 'vue'
import { Avatar,Lock } from '@element-plus/icons-vue'
</script>

3.组件内使用

<el-form-item>
    <el-input v-model="Form.username" type="text" :prefix-icon="Avatar" placeholder="用户名" />
</el-form-item>
<el-form-item>
    <el-input v-model="Form.password" type="password" :prefix-icon="Lock" placeholder="密码" />
</el-form-item>

另外：

:prefix-icon ：输入框前面展示icon

:suffix-icon ：输入框后面展示icon