<script setup>
import { ref } from 'vue'
const showDrawer = ref(false)
const open = () => { showDrawer.value = true }
const close = () => { showDrawer.value = false }
// 动态暴露我们的组件属性
const prop = defineProps({
title: String,
size: {
type: String,
default: "45%",
},
destroyOnClose: {
type: Boolean,
default: false
},
comfirmText: {
type: String,
default: "提交"
}
})
const loading = ref(false)
const showloading=()=> loading.value = true
const closeloading=()=> loading.value = false
// 向外暴露点击事件
const emit = defineEmits(["submit","empty"])
const submit = () => emit("submit")
const empty = () => emit("empty")
// 向父组件暴露一下方法
defineExpose({
open,
close,
showloading,
closeloading,
prop
})
</script>
<template>
<el-drawer v-model="showDrawer" :title="title" :size="size" :destroy-on-close="destroyOnClose"
:close-on-click-modal="false" class="formDrawer">
<!-- <el-form :model="ruleForm" :rules="rules" label-width="120px" class="DrawerForm" ref="formRef">
</el-form> -->
<div class="DrawerForm">
<div class="body">
<!-- 这是插槽,<slot></slot> 是 HTML 的一个重要特性,也是 Web 组件(Web Components)的一部分。
它允许开发者在自定义组件中插入占位符,以便在将来使用时,可以在这些占位符中填充内容。 -->
<slot></slot>
</div>
<div class="actions">
<el-button type="primary" @click="submit" :loading="loading">{{ comfirmText }}</el-button>
<el-button type="default" @click="empty">取消</el-button>
</div>
</div>
</el-drawer>
</template>
<style>
.formDrawer {
@apply ;
}
.DrawerForm {
width: 100%;
height: 100%;
position: relative;
/* flex-col垂直排布 */
@apply flex flex-col;
}
.body {
/* 超出部分是滚动 */
overflow-y: auto;
@apply ;
}
/* margin-top:auto就是会自动至于底部,但是很重要的是!父和子组件都要是块级组件 */
.actions {
height: 50px;
@apply mt-auto flex items-center;
}</style>
Drawer组件封装(抽屉)
于 2023-11-30 16:14:27 首次发布