<template>
|
<!-- dialog包裹 -->
|
<el-dialog v-if="currType == 'dialog'" :title="title" :model-value="visible" @opened="$emit('update:visible', true)"
|
@closed="$emit('update:visible', false)" destroy-on-close>
|
<div v-if="visible">
|
<slot name="content"></slot>
|
</div>
|
</el-dialog>
|
<!-- drawer包裹 -->
|
<el-drawer v-if="currType == 'drawer'" :title="title" size="45%" direction="ltr" :model-value="visible"
|
@opened="$emit('update:visible', true)" @closed="$emit('update:visible', false)" destroy-on-close>
|
<slot name="content"></slot>
|
</el-drawer>
|
<!-- 默认无包裹 -->
|
<div v-if="currType == 'normal'">
|
<slot></slot>
|
</div>
|
</template>
|
<script setup>
|
import { ref, defineEmits, watch } from 'vue';
|
const props = defineProps({
|
visible: Boolean,
|
title: String,
|
type: {
|
type: String,
|
default: 'normal'
|
}
|
});
|
const typeOptions = ref([
|
{ id: '0', label: 'dialog' },
|
{ id: '1', label: 'drawer' },
|
{ id: '10', label: '' }
|
]);
|
const currType = ref('');
|
const emit = defineEmits(['update:visible']);
|
watch(
|
() => props.type,
|
(nValue) => {
|
currType.value = nValue;
|
},
|
{ immediate: true }
|
);
|
</script>
|
<style scoped>
|
::v-deep .el-drawer__body {
|
padding-top: 0;
|
}
|
|
::v-deep .el-drawer__header {
|
margin-bottom: 16px;
|
}
|
</style>
|
