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.
60 lines
1.7 KiB
60 lines
1.7 KiB
4 years ago
|
|
||
|
|
|
||
|
|
## Drawer 抽屉
|
||
|
|
> 代码块： `uDrawer`
|
||
|
|
|
||
|
|
|
||
|
|
抽屉侧滑菜单。
|
||
|
|
|
||
|
|
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||
|
|
> - `width` 属性仅在 `vue` 页面生效，`nvue` 页面因性能问题，不支持动态设置宽度，如需修改，请下载组件修改源码
|
||
|
|
|
||
|
|
|
||
|
|
### 安装方式
|
||
|
|
|
||
|
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||
|
|
|
||
|
|
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||
|
|
|
||
|
|
### 基本用法
|
||
|
|
|
||
|
|
|
||
|
|
在 ``template`` 中使用组件
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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 |关闭抽屉 |-|
|
||
|
|
|
||
|
|
|