98 lines
2.0 KiB
Markdown
98 lines
2.0 KiB
Markdown
## 已实现
|
|
1. 正常手势操作
|
|
2. 方法开关
|
|
3. 显示/隐藏比例自动吸附
|
|
4. 动画
|
|
5. 独立滑动
|
|
6. .....编不出来了 自行测试吧
|
|
## 使用说明
|
|
和正常组件使用方式一样
|
|
```js
|
|
// 1.引入
|
|
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
|
|
// 2.挂载
|
|
components:{
|
|
exDrawer
|
|
}
|
|
```
|
|
```html
|
|
// 3.使用
|
|
<ex-drawer ref='drawer' width="488">
|
|
<view class="drawer" slot="drawerContent">
|
|
<button @click="close" type="default">关闭</button>
|
|
drawer
|
|
</view>
|
|
<view class="container" slot="containerContent">
|
|
<button @click="open" type="default">打开</button>
|
|
<view class="" v-for="(item,index) in 100" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</ex-drawer>
|
|
```
|
|
具体请查看demo
|
|
## props
|
|
1. width(string) // 抽屉宽度
|
|
2. 没了 主容器宽高和抽屉高度都可以被自动撑开 自行设置即可
|
|
## 插槽
|
|
1. drawerContent // 抽屉插槽
|
|
2. containerContent // 主容器插槽
|
|
## 方法
|
|
1. this.$refs.drawer.open() //打开
|
|
2. this.$refs.drawer.colse() //关闭
|
|
## 之后预计更新
|
|
1. 自定义进出吸附比例
|
|
2. 看需求....
|
|
```html
|
|
<template>
|
|
<view>
|
|
<ex-drawer ref='drawer' width="488">
|
|
<view class="drawer" slot="drawerContent">
|
|
<button @click="close" type="default">关闭</button>
|
|
drawer
|
|
</view>
|
|
<view class="container" slot="containerContent">
|
|
<button @click="open" type="default">打开</button>
|
|
<view class="" v-for="(item,index) in 100" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</ex-drawer>
|
|
</view>
|
|
</template>
|
|
```
|
|
```js
|
|
<script>
|
|
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
components:{
|
|
exDrawer
|
|
},
|
|
methods: {
|
|
open(){
|
|
this.$refs.drawer.open()
|
|
},
|
|
close(){
|
|
this.$refs.drawer.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
```css
|
|
<style>
|
|
.drawer{
|
|
background-color: #ffffff;
|
|
height: 100vh;
|
|
}
|
|
.container{
|
|
background-color: #19BE6B;
|
|
width: 750rpx;
|
|
}
|
|
</style>
|
|
``` |