<template>
|
<div class="drawer" :style="[styleDrawer]" :class="[show ? 'active':'none']" v-show="show">
|
<div v-if="isHeader" class="side-header">
|
<div class="side-option flex-display flex-align-center flex-justify-between">
|
<h2 class="title">{{ title }}</h2>
|
<CloseOutlined @click="close" />
|
</div>
|
<div class="border-bottom"></div>
|
</div>
|
<slot></slot>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, defineEmits } from 'vue'
|
import { CloseOutlined } from '@ant-design/icons-vue'
|
const porps = defineProps({
|
show: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
// required: true
|
},
|
// 是否显示头部
|
isHeader: {
|
type: Boolean,
|
default: true
|
},
|
// 定位css
|
styleDrawer: {
|
type: Object,
|
default: () => ({
|
top: 0
|
})
|
}
|
})
|
const emits = defineEmits(['update:show'])
|
const close = () => {
|
emits('update:show', false)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.active {
|
z-index: 1;
|
left: 100%;
|
}
|
.none {
|
z-index: -1;
|
left: 0;
|
}
|
.drawer {
|
position: absolute;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
transition: all .5s;
|
box-shadow: -12px 0px 13px -6px rgba(0,0,0,0.1);
|
background: #232323;
|
|
.side-header {
|
height: 60px;
|
font-size: 16px;
|
line-height: 60px;
|
box-sizing: border-box;
|
background-color: #232323;
|
border-bottom: 1px solid #4f4f4f;
|
|
.side-option {
|
padding: 0 16px;
|
|
.title {
|
color: $text-white-basic;
|
font-size: 18px;
|
margin: 0;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
</style>
|
