mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(PasswordInput): adjust demo
This commit is contained in:
chenjiahan
parent
14cd2863cc
commit
af43521fa2
@ -19,18 +19,14 @@ Vue.use(NumberKeyboard);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -43,30 +39,32 @@ export default {
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom length
|
||||
### Custom Length
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:length="4"
|
||||
:gutter="15"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### Without mask
|
||||
### Add Gutter
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:gutter="10"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### Without Mask
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
@ -79,22 +77,19 @@ export default {
|
||||
|
||||
### Hint Error
|
||||
|
||||
Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits.
|
||||
Use `info` to set info message, use `error-info` prop to set error message.
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -104,22 +99,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true,
|
||||
errorInfo: '',
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value.length === 6 && value !== '123456') {
|
||||
this.errorInfo = 'Password Mistake';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,19 +18,19 @@ Vue.use(NumberKeyboard);
|
||||
|
||||
### 基础用法
|
||||
|
||||
搭配数字键盘组件来实现密码输入功能。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -43,24 +43,30 @@ export default {
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义长度
|
||||
|
||||
通过 `length` 属性来设置密码长度。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:length="4"
|
||||
:gutter="15"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过 `gutter` 属性来设置格子之间的间距。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:gutter="10"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
@ -68,6 +74,8 @@ export default {
|
||||
|
||||
### 明文展示
|
||||
|
||||
将 `mask` 设置为 `false` 可以明文展示输入的内容，适用于短信验证码等场景。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
@ -77,23 +85,21 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 错误提示
|
||||
### 提示信息
|
||||
|
||||
通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。
|
||||
通过 `info` 属性设置提示信息，通过 `error-info` 属性设置错误提示，例如当输入六位时提示密码错误。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -103,22 +109,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true,
|
||||
errorInfo: '',
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value.length === 6 && value !== '123456') {
|
||||
this.errorInfo = '密码错误';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,48 +1,56 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block ref="basicUsage" :title="t('basicUsage')">
|
||||
<van-password-input
|
||||
:value="value1"
|
||||
:info="t('info')"
|
||||
:focused="keyboard === 'value1'"
|
||||
@focus="keyboard = 'value1'"
|
||||
: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="!!keyboard"
|
||||
:show="!!current"
|
||||
@blur="current = ''"
|
||||
@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>
|
||||
|
||||
@ -51,46 +59,76 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
info: '密码为 6 位数字',
|
||||
customLength: '自定义长度',
|
||||
removeMask: '明文展示',
|
||||
hintError: '错误提示',
|
||||
showInfo: '提示信息',
|
||||
addGutter: '格子间距',
|
||||
errorInfo: '密码错误',
|
||||
removeMask: '明文展示',
|
||||
customLength: '自定义长度',
|
||||
},
|
||||
'en-US': {
|
||||
info: 'Some tips',
|
||||
customLength: 'Custom Length',
|
||||
removeMask: 'Remove Mask',
|
||||
hintError: 'Hint Error',
|
||||
showInfo: 'Show Info',
|
||||
addGutter: 'Add Gutter',
|
||||
errorInfo: 'Password Mistake',
|
||||
removeMask: 'Remove Mask',
|
||||
customLength: 'Custom Length',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: '123',
|
||||
value2: '123',
|
||||
value3: '123',
|
||||
value4: '123',
|
||||
keyboard: 'value1',
|
||||
value: {
|
||||
showInfo: '123',
|
||||
addGutter: '123',
|
||||
basicUsage: '123',
|
||||
removeMask: '123',
|
||||
customLength: '123',
|
||||
},
|
||||
current: 'basicUsage',
|
||||
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 = '';
|
||||
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 { keyboard } = this;
|
||||
this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
|
||||
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>
|
||||
|
||||
@ -14,8 +14,55 @@ exports[`renders demo correctly 1`] = `
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item">1</li>
|
||||
<li class="van-hairline--left van-password-input__item">2</li>
|
||||
<li class="van-hairline--left van-password-input__item">3</li>
|
||||
<li class="van-hairline--left van-password-input__item"></li>
|
||||
<li class="van-hairline--left van-password-input__item"></li>
|
||||
<li class="van-hairline--left van-password-input__item"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
@ -63,39 +110,4 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item">1</li>
|
||||
<li class="van-hairline--left van-password-input__item">2</li>
|
||||
<li class="van-hairline--left van-password-input__item">3</li>
|
||||
<li class="van-hairline--left van-password-input__item"></li>
|
||||
<li class="van-hairline--left van-password-input__item"></li>
|
||||
<li class="van-hairline--left van-password-input__item"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user