129 lines
2.3 KiB
Vue
129 lines
2.3 KiB
Vue
|
|
||
|
|
<template>
|
||
|
|
<view v-show="visible">
|
||
|
|
<view
|
||
|
|
class="u-drawer__overlay"
|
||
|
|
:style="{ zIndex: zIndex }"
|
||
|
|
@click.stop="handleOverlayClick"
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
class="u-drawer"
|
||
|
|
:class="{
|
||
|
|
'u-drawer--left': placement === 'left',
|
||
|
|
'u-drawer--right': placement === 'right'
|
||
|
|
}"
|
||
|
|
:style="{ zIndex: zIndex + 1, width: width, [placement]: `-${translate}` }"
|
||
|
|
@transitionend="handleTransitionEnd"
|
||
|
|
>
|
||
|
|
<view class="u-drawer__content">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import props from './props.js'
|
||
|
|
export default {
|
||
|
|
name: 'u-drawer',
|
||
|
|
mixins: [props],
|
||
|
|
// props: {
|
||
|
|
// //
|
||
|
|
// visible: {
|
||
|
|
// type: Boolean,
|
||
|
|
// default: false,
|
||
|
|
// },
|
||
|
|
// mask: {
|
||
|
|
// type: Boolean,
|
||
|
|
// default: true,
|
||
|
|
// },
|
||
|
|
// width: {
|
||
|
|
// type: Number,
|
||
|
|
// default: 300,
|
||
|
|
// },
|
||
|
|
// placement: {
|
||
|
|
// type: String,
|
||
|
|
// default: 'left',
|
||
|
|
// validator: (value) => ['left', 'right'].includes(value),
|
||
|
|
// },
|
||
|
|
// // transition: {
|
||
|
|
// // type: String,
|
||
|
|
// // default: 'u-slide-down',
|
||
|
|
// // },
|
||
|
|
// zIndex: {
|
||
|
|
// type: Number,
|
||
|
|
// default: 100,
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
translate: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
show: {
|
||
|
|
immediate: true,
|
||
|
|
handler(value) {
|
||
|
|
if (value) {
|
||
|
|
this.openDrawer();
|
||
|
|
} else {
|
||
|
|
this.closeDrawer();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
openDrawer() {
|
||
|
|
this.$emit('open');
|
||
|
|
this.translate = this.width;
|
||
|
|
},
|
||
|
|
closeDrawer() {
|
||
|
|
this.$emit('close');
|
||
|
|
this.translate = 0;
|
||
|
|
},
|
||
|
|
handleOverlayClick() {
|
||
|
|
// console.log('this.mask',this.mask)
|
||
|
|
if (this.mask) {
|
||
|
|
this.$emit('update:visible', false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleTransitionEnd() {
|
||
|
|
if (!this.visible) {
|
||
|
|
this.translate = 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.u-drawer {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-drawer--left {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-drawer--right {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-drawer__content {
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-drawer__overlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
</style>
|