<script setup lang="ts">
import { ref } from 'vue'
const centerDialogVisible = ref(false)
const open = () => { centerDialogVisible.value = true }
const close = () => { centerDialogVisible.value = false }
const a =() =>{
console.log("a");
}
// 动态暴露我们的组件属性
const prop = defineProps({
title: String,
width: {
type: String,
default: "25%",
},
destroyOnClose: {
type: Boolean,
default: false
},
calText:{
type:String,
default:"取消"
},
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-dialog v-model="centerDialogVisible" :title="title" :width="width" center align-center>
<div class="body">
<!-- 这是插槽,<slot></slot> 是 HTML 的一个重要特性,也是 Web 组件(Web Components)的一部分。
它允许开发者在自定义组件中插入占位符,以便在将来使用时,可以在这些占位符中填充内容。 -->
<slot></slot>
</div>
<template #footer>
<span>
<el-button @click="empty">{{ calText }}</el-button>
<el-button type="primary" @click="submit">
{{ comfirmText }}
</el-button>
</span>
</template>
</el-dialog>
</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>
DaiLog组件封装(提示框)
于 2023-11-30 16:16:01 首次发布