问题

vantUI开发登录界面，密码输入框没有常用的密码显示与隐藏功能。

解决

没有现成的功能，只能通过如下方法曲线实现功能：

通过输入框可以增加右侧的图标，增加一个eye的图标
动态设置输入框的类型
添加图标点击事件，修改输入框的类型

源码：

<template><van-form @submit="onSubmit"><van-fieldlabel-class="phone-input"v-model="username"name="账户"label="账户"placeholder="请输入帐号"/><van-fieldlabel-class="phone-input"v-model="password"right-icon="eye":type="!passwordStatus?'password':'text'"name="密码"label="密码"@click-right-icon="passwordStatus=!passwordStatus"placeholder="请输入密码"/><div style="margin: 16px;"><van-button round block type="info" native-type="submit">提交</van-button></div></van-form>
</template><script>export default {name: "Phone",data(){return {passwordStatus:false,username:'',password:''}}}
</script>

vantUi密码框密码显示与隐藏（密文/明文）相关推荐

点击小眼睛完成密码框的显示与隐藏睁眼和闭眼
//当我点击小眼睛时private void eye() {img_login_eye.setOnClickListener( new View.OnClickListener() {@Overrid ...
Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
java 获取密码框密码,获得Windows下的密码框密码--编程学习网
获得Windows下的密码框密码,似乎是很多人感兴趣的话题,CSDN上问这类问题的人不计其数--这样看来,老罗也不能免俗啦,今天就让我跟大家探讨一下如何实现这一功能吧.^_^ 我们知道,Windows ...
html密码框不显示,密码框中密码的显示与隐藏切换(JS)
目标: 点击小眼睛后, 1.密码框变成文本框: 2.小眼睛图片由闭眼变成睁眼: 3.再次点击后,又变成闭眼+密码框要想实现3,方法1: 则需要一个变量,来辅助判断当前input的属性,如果flag为 ...
禁止浏览器自动填充密码框密码
<INPUT id="passWord" class="ipt" type="password" οnfοcus="cha ...
html密码框密码如何隐藏,webAPI: 密码框的密码显示和隐藏的功能
[JavaScript] 纯文本查看复制代码 Document .box { position: relative; width: 400px; border-bottom: 1px solid # ...
JS实现密码框的显示密码和隐藏密码简单功能
1.准备素材打开网页:https://www.iconfont.cn/ 阿里巴巴矢量库找到两个素材,下载即可 2.代码部分 <style>.box {position: relativ ...
android密码框右侧显示小眼睛
不知道为什么android 资料好少啊,一艘都2012-2015年的居多....这是为什么呢? 实现效果 <?xml version="1.0" encoding=" ...
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...

vantUi密码框密码显示与隐藏（密文/明文）

问题

解决

vantUi密码框密码显示与隐藏（密文/明文）相关推荐

最新文章

热门文章