135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<demo-section>
|
|
<demo-block ref="basicUsage" :title="t('basicUsage')">
|
|
<van-password-input
|
|
:value="value.basicUsage"
|
|
:focused="current === 'basicUsage'"
|
|
@focus="current = 'basicUsage'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block ref="customLength" :title="t('customLength')">
|
|
<van-password-input
|
|
:value="value.customLength"
|
|
:length="4"
|
|
:focused="current === 'customLength'"
|
|
@focus="current = 'customLength'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block ref="addGutter" :title="t('addGutter')">
|
|
<van-password-input
|
|
:value="value.addGutter"
|
|
:gutter="10"
|
|
:focused="current === 'addGutter'"
|
|
@focus="current = 'addGutter'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block ref="removeMask" :title="t('removeMask')">
|
|
<van-password-input
|
|
:mask="false"
|
|
:value="value.removeMask"
|
|
:focused="current === 'removeMask'"
|
|
@focus="current = 'removeMask'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block ref="showInfo" :title="t('showInfo')">
|
|
<van-password-input
|
|
:info="t('info')"
|
|
:value="value.showInfo"
|
|
:error-info="errorInfo"
|
|
:focused="current === 'showInfo'"
|
|
@focus="current = 'showInfo'"
|
|
/>
|
|
</demo-block>
|
|
|
|
<van-number-keyboard
|
|
:show="!!current"
|
|
@blur="current = ''"
|
|
@input="onInput"
|
|
@delete="onDelete"
|
|
/>
|
|
</demo-section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
i18n: {
|
|
'zh-CN': {
|
|
info: '密码为 6 位数字',
|
|
showInfo: '提示信息',
|
|
addGutter: '格子间距',
|
|
errorInfo: '密码错误',
|
|
removeMask: '明文展示',
|
|
customLength: '自定义长度',
|
|
},
|
|
'en-US': {
|
|
info: 'Some tips',
|
|
showInfo: 'Show Info',
|
|
addGutter: 'Add Gutter',
|
|
errorInfo: 'Password Mistake',
|
|
removeMask: 'Remove Mask',
|
|
customLength: 'Custom Length',
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
value: {
|
|
showInfo: '123',
|
|
addGutter: '123',
|
|
basicUsage: '123',
|
|
removeMask: '123',
|
|
customLength: '123',
|
|
},
|
|
current: 'basicUsage',
|
|
errorInfo: '',
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
current(value) {
|
|
if (value) {
|
|
const el = this.$refs[value].$el;
|
|
const { top } = el.getBoundingClientRect();
|
|
window.scrollTo(0, window.pageYOffset + top);
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
onInput(key) {
|
|
const { value, current } = this;
|
|
const maxlegnth = current === 'customLength' ? 4 : 6;
|
|
const newValue = (value[current] + key).slice(0, maxlegnth);
|
|
|
|
value[current] = newValue;
|
|
|
|
if (
|
|
current === 'showInfo' &&
|
|
newValue.length === 6 &&
|
|
newValue !== '123456'
|
|
) {
|
|
this.errorInfo = this.t('errorInfo');
|
|
}
|
|
},
|
|
onDelete() {
|
|
const { value, current } = this;
|
|
value[current] = value[current].slice(0, value[current].length - 1);
|
|
|
|
if (current === 'showInfo') {
|
|
this.errorInfo = '';
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.demo-password-input {
|
|
min-height: 140vh;
|
|
}
|
|
</style>
|