<template>
|
<div class="mw-drawer" v-show="visible">
|
<div class="mw-mask" @click="close"></div>
|
<div class="mw-drawer-content">
|
<div class="mw-drawer-wrapper">
|
<div class="mw-drawer-title">
|
<slot name="title"></slot>
|
</div>
|
<div class="mw-drawer-content">
|
<slot></slot>
|
</div>
|
<div class="mw-drawer-footer">
|
<slot name="footer"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "mwDrawer",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
}
|
},
|
methods: {
|
close() {
|
this.$emit('update:visible', false);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.mw-drawer {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 1002;
|
}
|
.mw-mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #00000030;
|
z-index: 1003;
|
}
|
.mw-drawer-content {
|
position: absolute;
|
width: 400px;
|
height: 100%;
|
right: 0;
|
background-color: #171350;
|
z-index: 1004;
|
}
|
.mw-drawer-wrapper {
|
display: flex;
|
flex-direction: column;
|
}
|
.mw-drawer-content {
|
flex: 1;
|
overflow-y: auto;
|
}
|
</style>
|
