vue：vant实现弹框

1. 单个弹出层及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) {
      // Toast(`当前值：${value}, 当前索引：${index}`)
    }
  },

  created() {}
}
</script>

// 全局使用的vant组件，不明白可以看这篇问文章：链接
2. 多个弹出层及picker选择器（实现） // 官方示例是，二级同一个弹框
// 省市区街道村社会用到。