单个弹出层及picker选择器（实现） // 只要通过一种行为（点击页面的某个按钮）来showPicker=true，让弹框显示出来 。功能：选择性别,学历等都会用到
<template
>
<div
class="vantdemon">
<!-- 单级别选择框：选择性别。学历
-->
<div @click
="clickFn()">点击我这个选择框，
</div
>
<van
-popup v
-model
="showPicker" position
="bottom">
<!-- <div style
="height:44px">zheshineirong
</div
> -->
<van
-picker
:columns
="columns" @change
="onChange" confirm
-button
-text
='确定' cancel
-button
-text
='取消' :show
-toolbar
='true' :default-index
="2"/>
</van
-popup
>
</div
>
</template
>
<script
>
export default {
data() {
return {
showPicker
: false,
show
: false,
columns
: ['杭州', '宁波', '温州', '嘉兴', '湖州']
}
},
methods
: {
clickFn() {
this.showPicker
= true
},
onConfirm(value
) {
this.value
= value
this.showPicker
= false
},
onChange(picker
, value
, index
) {
}
},
created() {}
}
</script
>
// 全局使用的vant组件，不明白可以看这篇问文章：链接 2. 多个弹出层及picker选择器（实现） // 官方示例是，二级同一个弹框 // 省市区街道村社会用到。
