Element-plus在input框中加入图标

最新推荐文章于 2024-08-20 14:24:16 发布

原创最新推荐文章于 2024-08-20 14:24:16 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #elementui

本文介绍了如何在Vue项目中使用ElementPlus的图标库icons-vue。通过正确导入User和Lock图标，并在setup函数中设置，然后在el-input组件中应用作为前缀图标。

用法:
首先引入对应的组件，注意这里不要用compoents,应该使用setUp

<script>
import { User } from "@element-plus/icons-vue";
import { Lock } from "@element-plus/icons-vue";
export default {
  name: "Login",
  setup(){
    return {
      User,Lock,
    }
  },
</script>

然后在<el-input>中使用

    <el-form-item prop="username">
          <el-input size="medium"  :prefix-icon="User" style="margin: 10px 0" v-model="user.username"></el-input>
        </el-form-item>