element给input框加图标

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

李長庚

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

阅读量1.6k

点赞数 1

分类专栏： elenent vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/xybhua/article/details/128487189

版权

vue 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

elenent

2 篇文章 0 订阅

订阅专栏

需要给input框前面添加图标

只需要在input中添加一个 prefix-icon="el-icon-user-solid" 即可

<template>
  <el-input prefix-icon="el-icon-user-solid" v-model="username" placeholder="请输入用户名"></el-input>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
};
</script>

效果如下：

需要给input框后面添加图标

只需要在input中添加一个 suffix-icon="el-icon-user-solid" 即可

<template>
  <el-input suffix-icon="el-icon-user-solid" v-model="username" placeholder="请输入用户名"></el-input>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
};
</script>

效果如下：

是否显示密码

只需要在input中添加一个 show-password 即可

<template>
  <el-input prefix-icon="el-icon-s-goods" v-model="password" show-password placeholder="请输入密码"></el-input>
</template>

<script>
export default {
  data() {
    return {
      password: "",
    };
  },
};
</script>

效果如下：

在这里插入图片描述