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