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

javascript 复制代码
<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博客

相关推荐
非凡ghost3 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost5 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost12 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪13 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
地方地方22 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米233325 分钟前
【Array】数组的方法
javascript
jason_yang26 分钟前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
voidmuse33 分钟前
带你零基础实现一个cursor (1):从零开始实现深度搜索功能-Function Call的介绍
javascript
大杯咖啡42 分钟前
前端常见的6种设计模式
前端·javascript
www_stdio1 小时前
深入浅出 JavaScript:从对象字面量到代理模式的实践探索
javascript