gas-station-ticket-uniapp-240822/components/base/super-drawer.vue

<template>
	<view>
		<view>
			<uni-drawer ref="mode1" mode="left" :width="200">
				<view class="bottom-line" style="line-height: 72rpx; margin: 0 52rpx;" 
					v-for="ele in drawerData1" @click="oncuechange1(ele)">{{ ele.name }}</view>
			</uni-drawer>
			
			<uni-drawer ref="mode2" mode="left" :width="200">
				<view class="bottom-line" style="line-height: 72rpx; margin: 0 52rpx;" 
					v-for="ele in drawerData2" @click="oncuechange2(ele)">{{ ele.name }}</view>
			</uni-drawer>
			
			<uni-drawer ref="mode3" mode="left" :width="200">
				<view class="bottom-line" style="line-height: 72rpx; margin: 0 52rpx;" 
					v-for="ele in drawerData3" @click="oncuechange3(ele)">{{ ele.name }}</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				drawerData1: [],
				drawerData2: [],
				drawerData3: [],
				value: []
			}
		},
		methods: {
			open(categorys){
				this.value = []
				this.drawerData1 = categorys
				this.$refs.mode1.open()
			},
			oncuechange1(ele){
				this.value.push(ele.name)
				if (ele.node){
					this.drawerData2 = ele.node
					this.$refs.mode2.open()
				} else {
					this.clearAndEmit()
				}
			},
			oncuechange2(ele){
				this.value.push(ele.name)
				if (ele.node){
					this.drawerData3 = ele.node
					this.$refs.mode3.open()
				} else {
					this.clearAndEmit()
				}
			},
			oncuechange3(ele){
				this.value.push(ele.name)
				this.clearAndEmit()
			},
			clearAndEmit(ele){	
				console.log("end", this.value.join(" "));
				this.$emit('changSuccess', this.value.join(" "))
				this.$refs.mode3.close()
				this.$refs.mode2.close()
				this.$refs.mode1.close()
			},
		}
	}
</script>