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博客

相关推荐
一只一只妖1 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟3 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶4 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice5 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip5 小时前
js上下文
前端·javascript
中草药z5 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
世伟爱吗喽6 小时前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo6 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭7 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@7 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js