YGChatCS/third/ex-drawer/README.md

已实现

1. 正常手势操作
2. 方法开关
3. 显示/隐藏比例自动吸附
4. 动画
5. 独立滑动
6. .....编不出来了 自行测试吧

使用说明

和正常组件使用方式一样

// 1.引入
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
// 2.挂载
components:{
	exDrawer
}

// 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. 看需求....

<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>

<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>

<style>
	.drawer{
		background-color: #ffffff;
		height: 100vh;
	}
	.container{
		background-color: #19BE6B;
		width: 750rpx;
	}
</style>