PenModal 对话框组件

代码示例

<template>
    <!-- 对话框 -->
    <pen-modal v-model="visible" :title="title" :loading="saveLoading" @save="saveEvent">
        <!-- 对话框内容 -->
    </pen-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);
const title = ref('新增');
const saveLoading = ref(false);

const saveEvent = () => {
    saveLoading.value = true;
    setTimeout(() => {
        saveLoading.value = false;
        visible.value = false;
        // 保存事件
    }, 1000)
}
</script>

插槽

插槽名	说明
default	默认插槽，可以自定义对话框的内容

属性类型

import type { DialogProps } from 'element-plus';

// PenModal 组件的属性，继承自DialogProps
interface Props extends Partial<DialogProps> {
    loading?: boolean // 确认按钮的loading状态
    showFooter?: boolean // 是否显示底部按钮
    showConfirmBtn?: boolean // 是否显示确认按钮
    confirmText?: string // 确认按钮文字
    save?: () => void // 确认按钮点击事件
}

事件

事件名	说明
open	Dialog 打开的回调
opened	Dialog 打开动画结束时的回调
close	Dialog 关闭的回调
closed	Dialog 关闭动画结束时的回调
open-auto-focus	输入焦点聚焦在 Dialog 内容时的回调
close-auto-focus	输入焦点从 Dialog 内容失焦时的回调
save	确认按钮点击事件