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