vue基于 input 实现密码的显示与隐藏功能

目录

前言：

大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。

一、准备图标

这是 element-ui框架中的 Icon 图标

点击跳转至 element-ui 框架中的 lcon 图标页：https://element.eleme.cn/#/zh-CN/component/icon

当然也可以使用下面的两个图片

二、Vue程序界面的展示

密码的显示和隐藏

三、代码

讲解（所需）代码（input使用的是element-ui框架中，引入的图标也是，如果想要使用图片的话使用img引入）

使用 Color 的true或false判断显示图标的样式，input框则使用 Type 的样式进行显示，**@click=“Show”** 点击修改密码的显示或者隐藏

下面有上面图片展示代码

// html代码
<el-input v-model="form.password" :type="Type"></el-input>
// 图标
<i class="el-icon-view" @click="Show" :class="{ icon: Color }"></i>
// img图片
<img
   src="https://img-blog.csdnimg.cn/20200416152056256.png"
   v-if="Color"
 />
 <img
   src="https://img-blog.csdnimg.cn/20200416151922667.png"
   v-if="!Color"
 />

// js代码
Type: "password",
Color: false,

Show() {
      // 点击改变input框的展示方式
      this.Type = this.Type === "password" ? "text" : "password";
      this.Color = !this.Color;
},

// css代码
i {
  color: rgb(221, 216, 216);
  position: absolute;
  top: 30%;
  right: 10px;
}
.icon {
  color: rgb(44, 43, 43);
}

上图展示全部代码（里面使用的是element-ui框架中引入的图标）

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <!-- rules 正则 -->
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input
            type="text"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" :type="Type"></el-input>
          <i class="el-icon-view" @click="Show" :class="{ icon: Color }"></i>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // input框输入的值
      form: {
        // 账号
        name: "",
        // 密码
        password: "",
      },
      // 密码的可见不可见
      Type: "password",
      Color: false,
    };
  },
  methods: {
    // 密码的可见和不可见
    Show() {
      // 点击改变input框的展示方式
      this.Type = this.Type === "password" ? "text" : "password";
      this.Color = !this.Color;
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/bg.jpg") center no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .box-card {
    width: 450px;
    background-color: #65768557;
    color: #fff;
    text-align: center;
    .el-form-item {
      position: relative;
      i {
        color: rgb(221, 216, 216);
        position: absolute;
        top: 30%;
        right: 10px;
      }
      .icon {
        color: rgb(44, 43, 43);
      }
    }
    .el-form-item__label {
      color: #fff;
    }
    // 标题
    .clearfix {
      font-size: 34px;
    }
    // 按钮
    .el-button {
      width: 100%;
    }
  }
}
</style>

总结：

以上就是 vue基于 input 实现密码的显示与隐藏功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog