parent
ebeb47ad6e
commit
80b3ad1ff6
@ -0,0 +1,59 @@
|
|||||||
|
<script setup>
|
||||||
|
let props = defineProps({
|
||||||
|
// 宽度 百分比或者number类型的像素
|
||||||
|
width: {
|
||||||
|
msg: '百分比或者number类型的像素',
|
||||||
|
type: [String, Number],
|
||||||
|
default: '30%'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
String
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const showDrawer = defineModel({type: Boolean})
|
||||||
|
const close = () => {
|
||||||
|
showDrawer.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-drawer :size="width" v-model="showDrawer" direction="ltr" append-to-body class="drawer" modal-class="drawer-modal" :z-index="165"
|
||||||
|
:with-header="false">
|
||||||
|
<div>
|
||||||
|
<div v-if="!!title" class="drawer-title">
|
||||||
|
{{title}}
|
||||||
|
</div>
|
||||||
|
<div class="close-icon" @click="close">
|
||||||
|
<el-icon size="20">
|
||||||
|
<Close/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</template>
|
||||||
|
</el-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.drawer{
|
||||||
|
transform: translate(0, 0);
|
||||||
|
.drawer-title{
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.drawer-modal{
|
||||||
|
top: 50px;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
}
|
||||||
|
.close-icon {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
//鼠标悬浮变成点击
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue