Vant PasswordInput 密码输入框
带网格的输入框组件,可以用于输入支付密码、短信验证码等,通常与组件配合使用
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); } } }