全局弹框 · ElementPlus

核心 API 请查阅 全局弹框-基础篇，本文档仅说明 ElementPlus 框架下的特化配置。

导入路径

import { $initHook, $JiessDialog } from '@jiess/plus/vue3';

const hook = $initHook({
    ui: element,          // element-plus 根对象
    ...Vue,               // Vue 响应式 API
});

ElementPlus 特化属性

基于 ElementPlus el-dialog，以下属性可透传：

属性	类型	默认值	说明
width	string|number	'960px'	弹框宽度
fullscreen	boolean	false	全屏模式
top	string	'15vh'	距离顶部距离
modal	boolean	true	是否显示遮罩层
closeOnClickModal	boolean	false	点击遮罩是否关闭
closeOnPressEscape	boolean	true	按 ESC 是否关闭
showClose	boolean	true	是否显示关闭按钮
destroyOnClose	boolean	false	关闭时销毁内容

$JiessDialog({
    $title: '编辑',
    $content: { /* ... */ },
    width: 600,
    fullscreen: false,
    closeOnClickModal: false,  // 防止误操作关闭
});

ElementPlus 特有配置

拖拽弹框

$JiessDialog({
    $title: '可拖拽弹框',
    $content: { /* ... */ },
    draggable: true,         // ElementPlus 2.x 拖拽特性
});

自定义头部

$JiessDialog({
    $header: {
        children: {
            title: '自定义头部',
            $Space: {
                children: [
                    { $Button: { children: '操作1' } },
                    { $Button: { children: '操作2' } },
                ],
            },
        },
    },
    $content: { /* ... */ },
});

注意事项

事项	说明
弹框嵌套	内部使用 state.instances 数组管理层级
el-dialog v-model	Jiess 内部自动处理 modelValue 双向绑定
CSS 变量	可通过 --el-dialog-width 等变量自定义样式

实战示例

示例 1：弹框内嵌表单 + 提交验证

const dialogConfig = $JiessDialog({
    $title: '新增用户',
    $content: {
        children: {
            $Form: {
                labelWidth: '100px',
                children: {
                    name: { $label: '姓名', $name: 'name', $rules: ['required'], $Input: { placeholder: '请输入姓名', clearable: true } },
                    email: { $label: '邮箱', $name: 'email', $rules: ['required', 'email'], $Input: { placeholder: '请输入邮箱' } },
                    phone: { $label: '手机号', $name: 'phone', $rules: ['phone'], $Input: { placeholder: '请输入手机号', maxlength: 11 } },
                    status: {
                        $label: '状态', $name: 'status', $value: 1,
                        $Select: { options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] },
                    },
                    remark: { $label: '备注', $name: 'remark', $Input: { type: 'textarea', rows: 3, placeholder: '请输入备注' } },
                },
            },
        },
    },
    $footer: {
        $Btns: {
            children: [
                { $Button: { children: '取消', onClick: 'cancel' } },
                {
                    $Button: {
                        children: '确定',
                        type: 'primary',
                        loading: false,
                        onClick() {
                            // 校验并提交
                            this.validate().then(async (data) => {
                                await api.createUser(data);
                                this.close();    // 关闭弹框
                                this.emit('refresh');  // 通知父列表刷新
                            }).catch(() => { /* 校验失败 */ });
                        },
                    },
                },
            ],
        },
    },
    width: 600,
    closeOnClickModal: false,  // 防止误操作关闭
});

示例 2：确认删除对话框

const confirmDialog = $JiessDialog({
    $title: '删除确认',
    $content: {
        children: {
            icon: { tag: 'i', className: 'el-icon-warning', style: { fontSize: '48px', color: '#e6a23c' } },
            text: { tag: 'p', style: { marginTop: '16px' }, text: '确定要删除该用户吗？此操作不可撤销。' },
        },
    },
    $footer: {
        $Btns: {
            children: [
                { $Button: { children: '取消', onClick: 'cancel' } },
                {
                    $Button: {
                        children: '确定删除',
                        type: 'danger',
                        async onClick() {
                            this.loading = true;
                            await api.deleteUser(userId);
                            this.close();
                            this.emit('refresh');
                        },
                    },
                },
            ],
        },
    },
    width: 420,
    top: '25vh',
});

示例 3：全屏弹框（详情查看）

$JiessDialog({
    $title: '订单详情',
    $content: {
        $Scrollbar: {
            height: 'calc(100vh - 200px)',
            children: {
                $Descriptions: {
                    border: true,
                    column: 2,
                    data: [
                        { label: '订单号', value: orderData.orderNo },
                        { label: '状态', value: orderData.status },
                        { label: '金额', value: `¥${orderData.amount}` },
                        { label: '创建时间', value: orderData.createTime },
                    ],
                },
                title: '商品列表',
                $JiessTable: {
                    dataSource: orderData.items,
                    $fields: [
                        { $label: '商品名', $name: 'productName' },
                        { $label: '数量', $name: 'qty' },
                        { $label: '单价', $name: 'price' },
                    ],
                },
            },
        },
    },
    fullscreen: true,
    top: '0',
});

下一步

• 全局弹框-基础篇 — BuildDialog 核心 API
• 快捷表单-ElementPlus — 弹框内嵌表单