75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<page-container
|
|
v-if="show"
|
|
:show="show"
|
|
:overlay="false"
|
|
@leave="onPageLeave"
|
|
/>
|
|
<!-- #endif -->
|
|
<u-popup
|
|
:value="show"
|
|
mode="bottom"
|
|
border-radius="24"
|
|
:z-index="10090"
|
|
:safe-area-inset-bottom="true"
|
|
:mask-close-able="maskCloseable"
|
|
@input="onPopupInput"
|
|
@close="close"
|
|
>
|
|
<view class="drawer-inner">
|
|
<view v-if="title" class="drawer-header">
|
|
<text class="drawer-title">{{ title }}</text>
|
|
<text v-if="showClose" class="drawer-close" @click="close">关闭</text>
|
|
</view>
|
|
<slot />
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DrawerPageContainer',
|
|
props: {
|
|
value: { type: Boolean, default: false },
|
|
title: { type: String, default: '' },
|
|
showClose: { type: Boolean, default: true },
|
|
maskCloseable: { type: Boolean, default: true },
|
|
},
|
|
computed: {
|
|
show: {
|
|
get() { return this.value },
|
|
set(v) { this.$emit('input', v) },
|
|
},
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.show = false
|
|
this.$emit('close')
|
|
},
|
|
onPopupInput(v) {
|
|
this.show = v
|
|
},
|
|
onPageLeave() {
|
|
this.close()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.drawer-inner { background: #fff; max-height: 80vh; display: flex; flex-direction: column; }
|
|
.drawer-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 28rpx 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
flex-shrink: 0;
|
|
}
|
|
.drawer-title { font-size: 32rpx; font-weight: 600; color: #1d2129; }
|
|
.drawer-close { font-size: 28rpx; color: #6acdbb; }
|
|
</style>
|