docs(Form): add Area demo

This commit is contained in:
陈嘉涵
2020-02-11 15:24:09 +08:00
parent ed16eb7a59
commit fb3892e302
6 changed files with 159 additions and 5 deletions
+43 -1
View File
@@ -250,7 +250,7 @@ export default {
<van-field
readonly
clickable
name="picker"
name="datetimePicker"
:value="value"
label="时间选择"
placeholder="点击选择时间"
@@ -290,6 +290,48 @@ export default {
};
```
### 表单项类型 - 省市区选择器
```html
<van-field
readonly
clickable
name="area"
:value="value"
label="地区选择"
placeholder="点击选择省市区"
@click="showArea = true"
/>
<van-popup v-model="showArea" position="bottom">
<van-area
:area-list="areaList"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
```
```js
export default {
data() {
return {
value: '',
showArea: false,
areaList: {} // 数据格式见 Area 组件文档
};
},
methods: {
onConfirm(values) {
this.value = values.map(item => item.name).join('/');
this.showArea = false;
},
onCancel() {
this.showArea = false;
},
},
};
```
## API
### Props