97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
|
<demo-section>
|
|
<demo-block :title="$t('basicUsage')">
|
|
<van-password-input
|
|
:value="value1"
|
|
:info="$t('info')"
|
|
:focused="keyboard === 'value1'"
|
|
@focus="keyboard = 'value1'"
|
|
/>
|
|
|
|
<van-number-keyboard
|
|
:show="!!keyboard"
|
|
@input="onInput"
|
|
@delete="onDelete"
|
|
@blur="keyboard = ''"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('customLength')">
|
|
<van-password-input
|
|
:value="value2"
|
|
:length="4"
|
|
gutter="15"
|
|
:focused="keyboard === 'value2'"
|
|
@focus="keyboard = 'value2'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('removeMask')">
|
|
<van-password-input
|
|
:value="value3"
|
|
:mask="false"
|
|
:focused="keyboard === 'value3'"
|
|
@focus="keyboard = 'value3'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('hintError')">
|
|
<van-password-input
|
|
:value="value4"
|
|
:error-info="errorInfo"
|
|
:focused="keyboard === 'value4'"
|
|
@focus="keyboard = 'value4'"
|
|
/>
|
|
</demo-block>
|
|
</demo-section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
i18n: {
|
|
'zh-CN': {
|
|
info: '密码为 6 位数字',
|
|
customLength: '自定义长度',
|
|
removeMask: '明文展示',
|
|
hintError: '错误提示',
|
|
errorInfo: '密码错误'
|
|
},
|
|
'en-US': {
|
|
info: 'Some tips',
|
|
customLength: 'Custom Length',
|
|
removeMask: 'Remove Mask',
|
|
hintError: 'Hint Error',
|
|
errorInfo: 'Password Mistake'
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
value1: '123',
|
|
value2: '123',
|
|
value3: '123',
|
|
value4: '123',
|
|
keyboard: 'value1',
|
|
errorInfo: ''
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
onInput(key) {
|
|
const { keyboard } = this;
|
|
this[keyboard] = (this[keyboard] + key).slice(0, 6);
|
|
if (this[keyboard].length === 6) {
|
|
this.errorInfo = this.$t('errorInfo');
|
|
} else {
|
|
this.errorInfo = '';
|
|
}
|
|
},
|
|
|
|
onDelete() {
|
|
const { keyboard } = this;
|
|
this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
|
|
}
|
|
}
|
|
};
|
|
</script>
|