Vue登录密码的显示与隐藏

最新推荐文章于 2024-06-17 09:46:41 发布

莫亓

最新推荐文章于 2024-06-17 09:46:41 发布

阅读量5.7k

点赞数 5

分类专栏： Vue网站局部实现文章标签：密码的显示与隐藏 Vue

本文链接：https://blog.csdn.net/Bule_daze/article/details/96128156

版权

Vue网站局部实现专栏收录该内容

19 篇文章 1 订阅

订阅专栏

点击小眼睛图标，实现输入框中密码的显示与隐藏：

	<i class="icon-password"></i>
    <input type="text" v-if="pwdType" v-model="eyeTxt" />
    <input type="password" placeholder="输入新密码" v-model="eyeTxt" v-else />
    <img :src="seen ? seenImg : unseenImg" @click="changeType()" v-on:mouseover="hoverEye" v-on:mouseout="outEye" class="icon-eye" />

js代码：

<script>
export default {
  data() {
    return {
      seen: "",
      unseenImg: require("../../assets/pics/see0.svg"),   //看不见密码时小眼睛的显示图片地址
      seenImg: require("../../assets/pics/see1.svg"),   //看得见密码时小眼睛的显示图片地址
      eyeTxt: "",
      pwdType: false   //此时文本框隐藏，显示密码框 
    };
  },
  methods: {
  	changeType: function() {
     	this.seen = !this.seen;   //小眼睛的变化
     	this.pwdType = !this.pwdType;   //跟着小眼睛变化，密码框隐藏，显示文本框 内容就显示了
    },
    hoverEye: function(event) {
    	this.seen = !this.seen;
    },
    outEye: function(event) {
    	this.seen = !this.seen;
    }
  }
};
</script>

效果图：
在这里插入图片描述

注：

:src 是vue动态绑定图片。
在图片路径前加上 require 可解决vue动态绑定图片不显示问题。
也可以直接利用 Vuetify 组件实现 ♟ vuetify -> text-fields -> password input 👉 https://vuetifyjs.com/en/components/text-fields

🔗参考链接：https://blog.csdn.net/weixin_42065713/article/details/80476718