mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Form): add Picker demo
This commit is contained in:
陈嘉涵
parent
de5dfe9211
commit
3f33b6de47
@ -195,6 +195,49 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Picker
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
label="Picker"
|
||||
placeholder="Picker"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -201,6 +201,49 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 选择器
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
label="选择器"
|
||||
placeholder="点击选择城市"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -47,6 +47,8 @@
|
||||
<van-uploader v-model="uploader" slot="input" multiple max-count="2" />
|
||||
</van-field>
|
||||
|
||||
<field-type-picker />
|
||||
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button type="info" round block>{{ $t('submit') }}</van-button>
|
||||
</div>
|
||||
@ -55,6 +57,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FieldTypePicker from './FieldTypePicker';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
@ -63,6 +67,7 @@ export default {
|
||||
submit: '提交',
|
||||
switch: '开关',
|
||||
slider: '滑块',
|
||||
picker: '选择器',
|
||||
stepper: '步进器',
|
||||
checkbox: '复选框',
|
||||
uploader: '文件上传',
|
||||
@ -76,6 +81,7 @@ export default {
|
||||
submit: 'Submit',
|
||||
switch: 'Switch',
|
||||
slider: 'Slider',
|
||||
picker: 'Picker',
|
||||
stepper: 'Stepper',
|
||||
checkbox: 'Checkbox',
|
||||
uploader: 'Uploader',
|
||||
@ -85,6 +91,10 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
FieldTypePicker,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
|
||||
56
src/form/demo/FieldTypePicker.vue
Normal file
56
src/form/demo/FieldTypePicker.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:label="$t('picker')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="$t('textColumns')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '选择器',
|
||||
placeholder: '点击选择城市',
|
||||
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Picker',
|
||||
placeholder: 'Picker',
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
<div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio van-radio van-radio--horizontal">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">单选框 1</span>
|
||||
</div>
|
||||
@ -88,6 +88,16 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>步进器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>评分</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
@ -125,16 +135,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>步进器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文件上传</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
@ -157,7 +157,16 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>选择器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user