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

小只笨笨狗～

已于 2023-02-20 15:12:04 修改

阅读量3.7k

点赞数 7

文章标签： vue.js elementui javascript

于 2022-03-09 19:32:44 首次发布

本文链接：https://blog.csdn.net/qq_51196135/article/details/123384487

版权

本文介绍了一个前端开发示例，通过点击操作改变input元素的type属性，实现眼睛图标随密码输入状态切换。通过flag变量控制眼睛的显示和隐藏，适用于密码和文本输入的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果

2、代码

*****

思路：通过click点击改变flag的值，通过flag的值判断眼睛睁开闭合的状态且判断type为password和text两种情况。

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