mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
d8b6ad7d54
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
1.6 KiB
1.6 KiB
PasswordInput
The PasswordInput component is usually used with NumberKeyboard Component.
Install
import { PasswordInput, NumberKeyBoard } from 'vant';
Vue.component(PasswordInput.name, PasswordInput);
Vue.component(NumberKeyBoard.name, NumberKeyBoard);
Usage
Basic Usage
<!-- PasswordInput -->
<van-password-input
:value="value"
info="Some tips"
@focus="showKeyboard = true"
/>
<!-- NumberKeyboard -->
<van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/>
export default {
data() {
return {
value: '',
showKeyboard: true
};
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
}
API
| Attribute | Description | Type | Default | Accepted Values |
|---|---|---|---|---|
| value | Password value | String |
'' |
- |
| length | Maxlength of password | Number |
6 |
- |
| info | Bottom info | String |
- | - |
| errorInfo | Bottom error info | String |
- | - |
Event
| Event | Description | Attribute |
|---|---|---|
| focus | Triggered when input get focused | - |