更新记录

1.0.11（2022-04-18）

增加手势关闭

1.0.6（2022-04-14）

增加距顶部任意位置弹出

1.0.5（2022-04-13）

优化关闭 、优化样式

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

介绍

基于uni-app开发的一个抽屉组件，功能有、支持设置宽度百分比、高度百分比、左边弹出、右边弹出、顶部弹出、底部弹出、 关闭按钮等功能 已用于生产环境

qq群 731805264

-- github 永远保持最新，有啥想法的可以提PR,共同开发 地址

drawer属性

参数 说明 类型 可选值 默认值 是否必须
modal 是否需要遮罩层 boolean -- true 否
width 设置左右的时候，设置宽度才有用 string '50%' 否
mode Drawer 打开的方向 String 'left'、'right'、'top'、'bottom' right 否
isGesture 是否手势关闭 boolean -- true 否
show-close 是否显示关闭按钮 boolean -- true 否
title Drawer 的标题，也可通过具名 slot （见下表）传入 string -- -- 否
visible 是否显示 Drawer，支持 .sync 修饰符 boolean -- false 否
withHeader 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 boolean -- true 否
wrapperClosable 点击遮罩层是否可以关闭 Drawer boolean -- true 否
before-close 关闭前的回调，会暂停 Drawer 的关闭,在这可以进行异步操作 function(done,type)，done 用于关闭 Drawer,type为mask遮罩层关闭，cancel为头部按钮关闭 -- -- 否

drawer slot

参数 说明
— Drawer 的内容
title Drawer 标题区的内容

drawer 方法

参数 说明
closeDrawer 用于关闭 Drawer, 该方法会调用传入的 before-close 方法

示例

<zb-drawer 
    :mode="mode" 
    width="80%" 
    :visible.sync="isShow1" >
    <view class="top-content"></view>
    </zb-drawer>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...