Element UI 密码输入框--可切换显示隐藏，自定义图标_elementui密码输入框

      <el-form-item prop="password">
        <el-input
          @keyup.enter.native="login"
          placeholder="密码"
          v-model="formData.password"
          :type="showPassword ? 'text' : 'password'"
        >
          <i slot="suffix" @click="switchPassword">
            <img
              v-if="showPassword"
              class="input_icon"
              src="@/assets/icons/password_show.png"
            />
            <img
              v-else
              class="input_icon"
              src="@/assets/icons/password_hide.png"
            />
          </i>
        </el-input>
      </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.input_icon {
  cursor: pointer;
  width: 24px;
  padding-top: 8px;
  padding-right: 6px;
}
1
2
3
4
5
6

data 中

      // 是否显示密码
      showPassword: false,
1
2

methods 中

    switchPassword() {
      this.showPassword = !this.showPassword;
    }
1
2
3

图片素材