Vant PasswordInput 密码输入框浅析

发布时间：2023-04-20 11:32:20 所属栏目：教程来源：

导读：带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与数字键盘组件配合使用

引入
import Vue from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';

Vue.use(Pa

带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与数字键盘组件配合使用

引入
import Vue from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';

Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
基础用法

<van-password-input
:value="value"
info="密码为 6 位数字"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>

<van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/>
export default {
data() {
return {
value: '123',
showKeyboard: true
};
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
}
自定义长度
<van-password-input
:value="value"
:length="4"
:gutter="15"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
明文展示
<van-password-input
:value="value"
:mask="false"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
错误提示
通过error-info属性可以设置错误提示信息，例如当输入六位时提示密码错误


<van-password-input
:value="value"
:error-info="errorInfo"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>

<van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/>
export default {
data() {
return {
value: '123',
showKeyboard: true,
errorInfo: ''
};
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
if (this.value.length === 6) {
this.errorInfo = '密码错误';
} else {
this.errorInfo = '';
}
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!