vue+vant使用密码输入框和数字键盘

1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在使用vue+vant开发的时候,我们经常会使用到其中的组件密码输入框和数字键盘完成支付等功能,下面我来分享一下密码输入框和数字键盘的使用,以及遇到的问题和解决方法,希望对你有所帮助。
4.废话不多说,先看效果图:

5.在template中添加如下代码:

6.在css中添加如下代码:

.Ps {
  height: 60% !important;
 }

 .Psinp {
  margin-top: 50px;
 }

7.在return中添加如下代码:

// 密码输入框
    PassWordObj: {
     show: false,
     value: "",
     errorInfo: "",
     one: "1"
    },
    // 数字键盘
    NumberJObj: {
     show: true,
     va: "",
     Ch: "888",
    },

8.在methods中添加如下代码:

goPay() {
    console.log("触发了付款事件");
    // this.NumberJObj.show = true;
    this.PassWordObj.show = true;
   },

// 点击数字键盘结束啦
   handleClosePopup() {
    this.PassWordObj.value = "";
    this.PassWordObj.errorInfo = "";
   },

//在使用数字键盘输入的时候触发
Cinput(key) {
    console.log("我是绑定的值");
    this.PassWordObj.value = (this.PassWordObj.value + key).slice(0, 6);
    console.log("我是绑定的值结束啦");
   },

// 点击数字键盘的删除
   onDelete(key) {
    console.log("我是删除操作");
    // console.log(value);
    // this.PassWordObj.value = value;
    this.PassWordObj.value = (this.PassWordObj.value + key).slice(0, this.PassWordObj.value.length - 1);
    console.log("我是删除操作结束啦");
   }

//注意:在这个地方有个坑点,就是在数字键盘输入的时候,你可能会发现当你点击第一个数字的时候,密码框中没有显示内容,当你点击第二个的时候会发现密码框中的内容出现了,当你删除的时候也是这样。
你可以使用:
this.PassWordObj.value = (this.PassWordObj.value + key).slice(0, this.PassWordObj.value.length - 1);
//这样的方法进行解决。

9.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。