You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.7 KiB
1.7 KiB
Drawer 抽屉
代码块:
uDrawer
抽屉侧滑菜单。
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
width
属性仅在vue
页面生效,nvue
页面因性能问题,不支持动态设置宽度,如需修改,请下载组件修改源码
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
如需通过npm
方式使用uni-ui
组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 template
中使用组件
<uni-drawer :visible="true">
<view style="padding:15px;">
<view class="uni-title">抽屉式导航</view>
</view>
</uni-drawer>
API
Drawer Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
mask | Boolean | true | 是否显示遮罩 |
maskClick | Boolean | true | 点击遮罩是否可以关闭抽屉 |
mode | String | left | Drawe滑出位置,可选值:left(从左侧滑出), right(从右侧滑出) |
width | Number | 220 | Drawe 宽度,仅vue页面设置生效 |
Drawer Events
事件名 | 说明 | 返回值 |
---|---|---|
@change | 抽屉状态发生变化触发事件 | true:抽屉已经打开;false:抽屉已经关闭; |
Drawer Methods
方法称名 | 说明 | 参数 |
---|---|---|
open | 打开抽屉 | - |
close | 关闭抽屉 | - |