190 lines
4.1 KiB
Vue
190 lines
4.1 KiB
Vue
<!--展示树结构的抽屉选择器-->
|
||
<template>
|
||
<view class="bg-gradual-blue">
|
||
<!-- <scroll-view scroll-y class="DrawerPage" :class="showDrawer?'show':''">
|
||
<view class='padding margin text-center'>
|
||
<view class='cu-btn bg-green lg block shadow radius margin' @tap="showModal" data-target="viewModal">
|
||
选择机组
|
||
</view>
|
||
</view>
|
||
</scroll-view> -->
|
||
<!--选择机组相关的抽屉-->
|
||
<scroll-view scroll-y class="DrawerWindow" :class="showDrawer?'show':''"
|
||
style="height:100%;back-ground-color:red;">
|
||
<view cclass="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg">
|
||
<view class="cu-bar bg-grey solid-bottom margin-top-sm">
|
||
<view class="action text-white">
|
||
<text>{{title}}</text>
|
||
<!-- <text class="text-red margin-left">{{dataList ? dataList.length:0}}</text> -->
|
||
<text>个</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="bg-white" style="max-height: calc(100vh);">
|
||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||
<view class="cu-item arrow" v-for="(item,index) in dataList" :key="index">
|
||
<view class="content" @tap="tabSelect(item)">
|
||
<text class="text-grey">🏭</text>
|
||
<text class="text-grey">{{item.name}}</text>
|
||
<view class="solid-bottom text-xs">
|
||
<text class="text-gray">机组数：<!-- {{item.children.length}} --> </text>
|
||
<!-- <view class="cu-tag badge bg-cyan">出库站台</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="DrawerClose" :class="showDrawer?'show':''" @tap="hideModal">
|
||
<text class="cuIcon-pullright"></text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'TreeDrawerPicker',
|
||
props: {
|
||
// 表单项配置数组
|
||
title: {
|
||
type: String,
|
||
default: () => 'Demo标题'
|
||
},
|
||
// 表单项配置数组
|
||
dataList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
showDrawer: {
|
||
type: Boolean,
|
||
default: () => false
|
||
},
|
||
},
|
||
emits: ['on-select', 'on-hiden'],
|
||
watch: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
modalName: null,
|
||
};
|
||
},
|
||
methods: {
|
||
hideModal(e) {
|
||
this.$emit('on-hiden', false);
|
||
},
|
||
tabSelect(item) {
|
||
this.$emit('on-select', {
|
||
...item
|
||
});
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-image: var(--gradualBlue);
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.DrawerPage {
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0vw;
|
||
background-color: #f1f1f1;
|
||
transition: all 0.4s;
|
||
}
|
||
|
||
.DrawerPage.show {
|
||
transform: scale(0.9, 0.9);
|
||
left: 85vw;
|
||
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
||
transform-origin: 0;
|
||
}
|
||
|
||
.DrawerWindow {
|
||
position: absolute;
|
||
width: 85vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
transform: scale(0.9, 0.9) translateX(-100%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.4s;
|
||
padding: 100upx 0;
|
||
}
|
||
|
||
.DrawerWindow.show {
|
||
transform: scale(1, 1) translateX(0%);
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.DrawerClose {
|
||
position: absolute;
|
||
width: 40vw;
|
||
height: 100vh;
|
||
right: 0;
|
||
top: 0;
|
||
color: transparent;
|
||
padding-bottom: 30upx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||
letter-spacing: 5px;
|
||
font-size: 50upx;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.4s;
|
||
}
|
||
|
||
.DrawerClose.show {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
width: 15vw;
|
||
color: #fff;
|
||
}
|
||
|
||
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
||
width: 64upx;
|
||
height: 64upx;
|
||
line-height: 64upx;
|
||
margin: 0;
|
||
display: inline-block;
|
||
}
|
||
|
||
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
||
margin: 0;
|
||
}
|
||
|
||
.DrawerPage .nav {
|
||
flex: 1;
|
||
}
|
||
|
||
.DrawerPage .nav .cu-item.cur {
|
||
border-bottom: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.DrawerPage .nav .cu-item.cur::after {
|
||
content: "";
|
||
width: 10upx;
|
||
height: 10upx;
|
||
background-color: currentColor;
|
||
position: absolute;
|
||
bottom: 10upx;
|
||
border-radius: 10upx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.DrawerPage .cu-bar.tabbar .action {
|
||
flex: initial;
|
||
}
|
||
</style> |