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

相关推荐
慕斯策划一场流浪5 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
cypking33 分钟前
解决 axios get请求瞎转义问题
vue.js
向阳25641 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~1 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友1 小时前
JS严格模式,启动!
javascript·后端·node.js
Carlos_sam1 小时前
OpenLayers:如何控制Overlay的层级?
前端·javascript
莫循瑾木1 小时前
Vue3 Composition API 完全指南
前端·vue.js·前端工程化
初辰ge1 小时前
后端说“基本增删改查都写好了,就差切图仔对接口了!”——我一怒之下撸了个代码生成器
前端·vue.js
z_mazin2 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫