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

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

前言:

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


一、准备图标

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

51e63cfc39c14823ac756accd7da31af.png


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


20200416151922667.png

20200416152056256.png


二、Vue程序界面的展示

网络异常,图片无法展示
|

网络异常,图片无法展示
|


image.png


密码的显示和隐藏


三、代码

讲解(所需)代码(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://ucc.alicdn.com/images/user-upload-01/20200416152056256.png"
   v-if="Color"
 />
 <img
   src="https://ucc.alicdn.com/images/user-upload-01/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 实现密码的显示与隐藏功能,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。

相关文章
|
8天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
8天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
8天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
14天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
14天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
13天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
13天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
14天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
14天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。