Element中给input框加icon图标的方法

需要给input框前面添加图标

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

  <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="loginForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

效果如下

在这里插入图片描述

需要给input框后面添加图标

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

<el-form-item prop="username">
          <el-input
            suffix-icon="el-icon-user-solid"
            v-model="loginForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

效果如下

在这里插入图片描述

是否显示密码

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

  <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-s-goods"
            v-model="loginForm.password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

效果如下

Element中给input框加icon图标的方法_第1张图片

你可能感兴趣的:(UI,框架,elementui)