vue实现密码显示与隐藏按钮的自定义组件功能

2024-10-02 00:20:45

思路

实现该组件有两个思路，一个使用v-model进行双向绑定，一个是使用prop的.sync修饰符、父子组件通信。

1.v-model形式

v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向绑定，子组件中的input数据绑定可以使用v-model，也可以使用实现v-model的原理语法糖，下面两种方式都可作为子组件中的数据绑定。

<input type="password" v-model="inputvalue"/>
<input type="password" :value="inputvalue" @input="inputvalue=$event.target.value"/>

关于v-model的实现可查看其他关于v-model的实现文章。

最后实现的子组件文件如下，这里的显示隐藏的点击使用的是文字，实际使用时可使用对应的icon字体图标，并设定一定的样式。

<template>
<div>
  <input :type='show?"text":"password"' :value="inputvalue"
@input="inputvalue=$event.target.value" :placeholder='placeholder'/>
  <i :title="show?'隐藏密码':'显示密码'" @click="changePass"
style="cursor:pointer;">{{show?'隐藏':'显示'}}</i>
</div>
</template>

<script>
export default {
  props: {
    value: {
      default: "",
      type: String
    },
    placeholder: {
      default: "",
      type: String
    },
  },
  data(){
    return{
      inputvalue:"",
      show:false,//密码显示或隐藏的Boolean,默认false，密码不显示
    }
  },
  watch:{
    inputvalue(news,olds){
      this.$emit("input",news);
    }
  },
  mounted(){
    this.inputvalue=this.value;
  },
  methods:{
    changePass(){
      this.show=!this.show;
    }
  }
}
</script>
<style>
</style>

父组件引用方式如下

<input-password v-model="value"></input-password>

因为这里实现的v-model的绑定方式，而v-model的实现就是监听的input事件，则当inputvalue改变时，则向父组件发出input事件，父组件使用v-model监听input事件，修改父组件中的value值，此处实现了双向绑定，同时在显示和隐藏的i标签上绑定事件，点击i标签时改变show的值，通过判断show的值动态改变input的type，实现密码的显示和隐藏。

2。.sync修饰符

.sync修饰符的实现与v-model的实现方式相同，唯一不同的是watch监听inputvalue变化时向父组件发出的事件修改为 "update:value" ,修改后inputvalue的监听函数如下

inputvalue(news,olds){
      this.$emit("update:value",news);
    },

父组件引用方式

<input-password :value.sync="value"></input-password>

写到最后

其实两种方式的实现最主要需要的还是父子组件之间的传值，使用emit，vuex，或自定义仓库等都可实现父子组件中的传值，监听inputvalue修改时可以同时使用两种emit发送，可同时支持两种方式。

以上所述是小编给大家介绍的vue实现密码显示与隐藏按钮的自定义组件功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

浅析Vue自定义组件的v-model

最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price变量与输入值双
vue 封装自定义组件之tabal列表编辑单元格组件实例代码

vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内
vue如何在自定义组件中使用v-model

v-model指令所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信  <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="st
vue2.0 自定义组件的方法（vue组件的封装）

一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据
vue 自定义组件 v-model双向绑定、父子组件同步通信的多种写法

上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
Vue结合原生js实现自定义组件自动生成示例

就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(-).这又是为何呢,下一
vue实现密码显示与隐藏按钮的自定义组件功能

思路实现该组件有两个思路,一个使用v-model进行双向绑定,一个是使用prop的.sync修饰符.父子组件通信. 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误.子组件中定义inputvalue字段,用于子组件中input元素的值的双向绑定,子组件中的input数据绑定可以使用v-model,也可以使用实现v-model的原理语法糖,下面两种方式
vue实现密码显示隐藏切换功能

先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da
vue实现密码显示隐藏功能的思路详解

效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式: 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标. 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --
Android 密码显示与隐藏功能实例

效果: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android
android控制密码显示与隐藏的方法

本文实例为大家分享了android控制密码显示与隐藏的具体代码,供大家参考,具体内容如下 <RelativeLayout android:id="@+id/view2" android:layout_width="match_parent" android:layout_height="60dp" android:layout_marginTop
vue项目中实现图片预览的公用组件功能

今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q
vue draggable resizable 实现可拖拽缩放的组件功能

虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了. 所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本,最近正好有时间就适配一下. 新增特征冲突检测吸附对齐默认样式优化功能预览项目地址 github.com/gorkys/vue-- 如果喜欢该项目,欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件是否开启冲突检
vue实现一个6个输入框的验证码输入组件功能的实例代码

要实现的功能: 完全和单输入框一样的操作,甚至可以插入覆盖: 1,限制输入数字 2,正常输入 3,backspace删除 4,paste任意位置粘贴输入 5,光标选中一个数字,滚轮可以微调数字大小,限制0-9 6,123|456 自动覆盖光标后输入的字符,此时光标在3后,继续输入111,会得到123111,而不用手动删除456 7,封装成vue单文件组件,方便任意调用. 模板代码 <template> <div class="input-box"> <di
vue基于input实现密码的显示与隐藏功能

前言大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可.但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示. 实现效果实现思路 1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏:2.在页面中循环遍历data中的p
Vue基于iview实现登录密码的显示与隐藏功能

目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果

vue实现密码显示与隐藏按钮的自定义组件功能

相关推荐

随机推荐