mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: add multiple examples (#5564)
This commit is contained in:
木槿花开
neverland
parent
c29372b114
commit
a530c0314c
@ -195,6 +195,19 @@ Textarea Field can be auto resize when has `autosize` prop
|
||||
/>
|
||||
```
|
||||
|
||||
### Input Align
|
||||
|
||||
Use `input-align` prop to align the input value
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="Text"
|
||||
:placeholder="Input Align Right"
|
||||
input-align="right"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -214,6 +214,19 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 输入框内容对齐
|
||||
|
||||
通过`input-align`属性可以设置输入框内容的对齐方式
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="文本"
|
||||
:placeholder="输入框内容右对齐"
|
||||
input-align="right"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -145,6 +145,17 @@
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('inputAlign')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="$t('text')"
|
||||
:placeholder="$t('alignPlaceHolder')"
|
||||
input-align="right"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -171,13 +182,15 @@ export default {
|
||||
showWordLimit: '显示字数统计',
|
||||
inputReadonly: '输入框只读',
|
||||
inputDisabled: '输入框已禁用',
|
||||
inputAlign: '输入框内容对齐',
|
||||
smsPlaceholder: '请输入短信验证码',
|
||||
textPlaceholder: '请输入文本',
|
||||
digitPlaceholder: '请输入整数',
|
||||
phonePlaceholder: '请输入手机号',
|
||||
textareaAutosize: '高度自适应',
|
||||
numberPlaceholder: '请输入数字（支持小数）',
|
||||
messagePlaceholder: '请输入留言'
|
||||
messagePlaceholder: '请输入留言',
|
||||
alignPlaceHolder: '输入框内容右对齐',
|
||||
},
|
||||
'en-US': {
|
||||
tel: 'Tel',
|
||||
@ -199,13 +212,15 @@ export default {
|
||||
showWordLimit: 'Show Word Limit',
|
||||
inputReadonly: 'Input Readonly',
|
||||
inputDisabled: 'Input Disabled',
|
||||
inputAlign: 'Input Align',
|
||||
smsPlaceholder: 'SMS',
|
||||
textPlaceholder: 'Text',
|
||||
digitPlaceholder: 'Digit',
|
||||
phonePlaceholder: 'Phone',
|
||||
textareaAutosize: 'Auto Resize',
|
||||
numberPlaceholder: 'Number',
|
||||
messagePlaceholder: 'Message'
|
||||
messagePlaceholder: 'Message',
|
||||
alignPlaceHolder: 'Input Align Right',
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -146,5 +146,15 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="输入框内容右对齐" class="van-field__control van-field__control--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -90,6 +90,45 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### Bottom Left Button Content
|
||||
|
||||
Use `extra-key` prop to set the content of bottom left button
|
||||
|
||||
```html
|
||||
<van-button plain type="primary" @touchstart.stop="show = true'">
|
||||
Show Id Card Number Keyboard
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
close-button-text="Close"
|
||||
extra-key="X"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
### Keyboard Title
|
||||
|
||||
Use `title` prop to set keyboard title
|
||||
|
||||
```html
|
||||
<van-button plain type="info" @touchstart.stop="show = true'">
|
||||
Show Custom Title Keyboard
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
close-button-text="Close"
|
||||
title="Keyboard Title"
|
||||
extra-key="."
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -96,6 +96,45 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 左下角按键内容
|
||||
|
||||
通过`extra-key`属性可以设置左下角按键内容
|
||||
|
||||
```html
|
||||
<van-button plain type="primary" @touchstart.stop="show = true'">
|
||||
弹出身份证号码键盘
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
close-button-text="完成"
|
||||
extra-key="X"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
### 键盘标题
|
||||
|
||||
通过`title`属性可以设置键盘标题
|
||||
|
||||
```html
|
||||
<van-button plain type="info" @touchstart.stop="show = true'">
|
||||
弹出自定义标题键盘
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
close-button-text="完成"
|
||||
title="键盘标题"
|
||||
extra-key="."
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -43,6 +43,33 @@
|
||||
@blur="keyboard = ''"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('extraKey')">
|
||||
<van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">{{ $t('button3') }}</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'extraKey'"
|
||||
:close-button-text="$t('close')"
|
||||
extra-key="X"
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title')">
|
||||
<van-button plain type="info" @touchstart.stop="keyboard = 'title'">{{ $t('button4') }}</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'title'"
|
||||
:close-button-text="$t('close')"
|
||||
:title="$t('title')"
|
||||
extra-key="."
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -54,20 +81,28 @@ export default {
|
||||
custom: '自定义样式',
|
||||
button1: '弹出默认键盘',
|
||||
button2: '弹出自定义键盘',
|
||||
button3: '弹出身份证号码键盘',
|
||||
button4: '弹出自定义标题键盘',
|
||||
close: '完成',
|
||||
input: '输入',
|
||||
bindValue: '双向绑定',
|
||||
clickToInput: '点此输入'
|
||||
clickToInput: '点此输入',
|
||||
extraKey: '左下角按键内容',
|
||||
title: '键盘标题'
|
||||
},
|
||||
'en-US': {
|
||||
default: 'Default style',
|
||||
custom: 'Custom style',
|
||||
button1: 'Show Default Keyboard',
|
||||
button2: 'Show Custom Keyboard',
|
||||
button3: 'Show Id Card Number Keyboard',
|
||||
button4: 'Show Custom Title Keyboard',
|
||||
close: 'Close',
|
||||
input: 'Input',
|
||||
bindValue: 'Bind Value',
|
||||
clickToInput: 'Click To Input'
|
||||
clickToInput: 'Click To Input',
|
||||
extraKey: 'Bottom Left Button Content',
|
||||
title: 'Keyboard Title'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -25,5 +25,17 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">弹出身份证号码键盘</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">弹出自定义标题键盘</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -78,6 +78,53 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### Hint Error
|
||||
|
||||
Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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 = 'Password Mistake';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -78,6 +78,54 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 错误提示
|
||||
|
||||
通过`error-info`属性可以设置错误提示信息，例如当输入六位时提示密码错误
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<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"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -34,6 +34,15 @@
|
||||
@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>
|
||||
|
||||
@ -43,12 +52,16 @@ export default {
|
||||
'zh-CN': {
|
||||
info: '密码为 6 位数字',
|
||||
customLength: '自定义长度',
|
||||
removeMask: '明文展示'
|
||||
removeMask: '明文展示',
|
||||
hintError: '错误提示',
|
||||
errorInfo: '密码错误'
|
||||
},
|
||||
'en-US': {
|
||||
info: 'Some tips',
|
||||
customLength: 'Custom Length',
|
||||
removeMask: 'Remove Mask'
|
||||
removeMask: 'Remove Mask',
|
||||
hintError: 'Hint Error',
|
||||
errorInfo: 'Password Mistake'
|
||||
}
|
||||
},
|
||||
|
||||
@ -57,7 +70,9 @@ export default {
|
||||
value1: '123',
|
||||
value2: '123',
|
||||
value3: '123',
|
||||
keyboard: 'value1'
|
||||
value4: '123',
|
||||
keyboard: 'value1',
|
||||
errorInfo: ''
|
||||
};
|
||||
},
|
||||
|
||||
@ -65,6 +80,11 @@ export default {
|
||||
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() {
|
||||
|
||||
@ -42,5 +42,17 @@ exports[`renders demo correctly 1`] = `
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class=""><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user