init
This commit is contained in:
86
move/uni_modules/uni-drawer/readme.md
Normal file
86
move/uni_modules/uni-drawer/readme.md
Normal file
@@ -0,0 +1,86 @@
|
||||
|
||||
|
||||
## Drawer 抽屉
|
||||
> **组件名:uni-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
|
||||
<template>
|
||||
<view>
|
||||
<button @click="showDrawer" type="primary">右侧弹出 显示Drawer</button>
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="false">
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<button @click="closeDrawer" type="primary">关闭Drawer</button>
|
||||
<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
|
||||
</scroll-view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.$refs.showRight.open();
|
||||
},
|
||||
closeDrawer() {
|
||||
this.$refs.showRight.close();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script
|
||||
```
|
||||
|
||||
## 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 |关闭抽屉 |-|
|
||||
|
||||
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer](https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer)
|
||||
Reference in New Issue
Block a user