关于vue.js:vuevant使用密码输入框和数字键盘

1. 开发环境 vue+vant
2. 电脑系统 windows10 专业版
3. 在应用 vue+vant 开发的时候, 咱们常常会应用到其中的组件明码输入框和数字键盘实现领取等性能, 上面我来分享一下明码输入框和数字键盘的应用, 以及遇到的问题和解决办法, 心愿对你有所帮忙。
4. 废话不多说, 先看效果图:

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

<van-popup class="Ps" v-model="Cshow" closeable close-icon="close" @close="handleClosePopup" position="bottom"
    :style="{height:'65%'}">
    <van-password-input class="Psinp" :value="PassWordObj.value" info="The default payment password is : 123456"
     :error-info="PassWordObj.errorInfo" :focused="PassWordObj.show" @focus="NumberJObj.show = true" />
    </van-field>
    <van-number-keyboard v-model="NumberJObj.va" :show="NumberJObj.show" @blur="NumberJObj.show = false" @input="Cinput"
     @delete="onDelete(NumberJObj.va)" />
   </van-popup>

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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。