vant--------Picker与Popup 选择器和遮罩的完美结合

初学前端的小伙伴肯定遇到过这样的问题吧，想写一个下拉，又想写一个遮罩。两个合起来用，然后写一个遮罩height:100%,width:100%,z-index:999,等等去定

繁琐又麻烦 体验感还不一定加

将vant 的picker 与popup集合 方便快捷实用

1.在main.js 里引入

import { Popup } from 'vant';
Vue.use(Popup);
import { Picker } from 'vant';

Vue.use(Picker);

 

2.

            <van-popup v-model="show" position="bottom" :overlay="true">
                <van-picker show-toolbar title="请选择区域代理城市" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
            </van-popup>

position:你可以自己定义 top or bottom or center 当然一般是bottom

:overlay:false or true看个人需求

title:根据你自己需求定义

js: