vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

<template>
  <div class="login-container">
    <el-input
      v-model="pwd"
      :type="type"
      class="pwd-input"
      placeholder="请输入密码"
    >
      <i
        slot="suffix"
        class="icon-style"
        :class="elIcon"
        autocomplete="auto"
        @click="flag = !flag"
      />
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false
    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "el-icon-minus" : "el-icon-view";
    }
  }
};
</script>
<style>
.icon-style {
  margin-top: 8px;
  font-size: 18px;
}
.pwd-input {
  border: 1px solid #fff;
  width: 250px;
}
</style>

 参考文档

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏_input设置输入密码效果-CSDN博客

【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果(阿里巴巴iconfront图标库vue项目本地引用)_element密码图标-CSDN博客

相关推荐

  1. Redis 设置密码

    2024-04-02 06:40:03       28 阅读
  2. vue element input让浏览器不保存密码

    2024-04-02 06:40:03       9 阅读

最近更新

  1. 类和对象(下)

    2024-04-02 06:40:03       0 阅读
  2. C++静态变量

    2024-04-02 06:40:03       0 阅读
  3. 【python】一文读懂python函数

    2024-04-02 06:40:03       0 阅读
  4. ADC通道检测功能-单片机通用模板

    2024-04-02 06:40:03       0 阅读
  5. AI原生技术分享活动:引领智能科技新浪潮

    2024-04-02 06:40:03       0 阅读
  6. JVM中都有哪些引用类型

    2024-04-02 06:40:03       0 阅读
  7. 用爬虫玩转石墨文档

    2024-04-02 06:40:03       0 阅读

热门阅读

  1. 禁止软件访问外网

    2024-04-02 06:40:03       3 阅读
  2. Git简介

    Git简介

    2024-04-02 06:40:03      2 阅读
  3. kafka面试常见问题

    2024-04-02 06:40:03       5 阅读
  4. redis -List

    2024-04-02 06:40:03       6 阅读