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

最新推荐文章于 2024-08-24 15:30:52 发布

张丹新叶之扉

最新推荐文章于 2024-08-24 15:30:52 发布

阅读量3.4w

点赞数 2

分类专栏： vue.js之vant 文章标签： Picker Popup 选择器/下拉遮罩层下拉出现遮罩

本文链接：https://blog.csdn.net/ZXD1314520/article/details/81871140

版权

本文介绍了如何在前端开发中，通过Vant库将Picker选择器和Popup遮罩层结合使用，以实现方便快捷的下拉选择功能。在main.js中引入组件，并通过配置position、overlay和title等属性，轻松创建底部弹出的下拉选择器，避免了手动设置高度、宽度和z-index的繁琐过程。示例代码和实际效果展示了这一组合的实用性。

摘要由CSDN通过智能技术生成

初学前端的小伙伴肯定遇到过这样的问题吧，想写一个下拉，又想写一个遮罩。两个合起来用，然后写一个遮罩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);

            <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:根据你自己需求定义