使用 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