# useDialog 函数式调用文档

useDialog 是一个函数式调用的对话框工具，基于 Element UI 的 el-dialog 组件封装，提供了更灵活、更简洁的对话框创建方式。

# 功能特性

✅ 函数式调用，无需在模板中声明组件
✅ 支持自定义组件内容
✅ 支持传递组件属性
✅ 支持自定义对话框配置
✅ 支持关闭回调
✅ 支持拖拽功能

# 基本用法

# 表单对话框

<script>
import { useDialog } from "../index";

export default {
  methods: {
    openFormDialog() {
      // 定义表单组件，使用 render 函数
      const FormComponent = {
        props: ["initialForm"],
        data() {
          return {
            form: this.initialForm || { name: "", age: 0, email: "" },
            rules: {
              name: [
                { required: true, message: "请输入姓名", trigger: "blur" },
              ],
              age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
              email: [
                { required: true, message: "请输入邮箱", trigger: "blur" },
                {
                  type: "email",
                  message: "请输入正确的邮箱格式",
                  trigger: "blur",
                },
              ],
            },
          };
        },
        methods: {
          handleSubmit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                this.$emit("close", "submit", this.form);
              }
            });
          },
          handleCancel() {
            this.$emit("close", "cancel");
          },
        },
        render(h) {
          return h("div", {
            style: {
              padding: "20px",
            },
          }, [
            h("h3", "表单对话框示例"),
            h("el-form", {
              ref: "formRef",
              props: {
                model: this.form,
                rules: this.rules,
                labelWidth: "80px",
              },
            }, [
              h("el-form-item", {
                props: {
                  label: "姓名",
                  prop: "name",
                },
              }, [
                h("el-input", {
                  props: {
                    value: this.form.name,
                  },
                  on: {
                    input: (value) => {
                      this.form.name = value;
                    },
                  },
                }),
              ]),
              h("el-form-item", {
                props: {
                  label: "年龄",
                  prop: "age",
                },
              }, [
                h("el-input-number", {
                  props: {
                    value: this.form.age,
                    min: 0,
                    max: 100,
                  },
                  on: {
                    change: (value) => {
                      this.form.age = value;
                    },
                  },
                }),
              ]),
              h("el-form-item", {
                props: {
                  label: "邮箱",
                  prop: "email",
                },
              }, [
                h("el-input", {
                  props: {
                    value: this.form.email,
                    type: "email",
                  },
                  on: {
                    input: (value) => {
                      this.form.email = value;
                    },
                  },
                }),
              ]),
              h("el-form-item", {}, [
                h("el-button", {
                  props: {
                    type: "primary",
                  },
                  on: {
                    click: this.handleSubmit,
                  },
                }, "提交"),
                h("el-button", {
                  on: {
                    click: this.handleCancel,
                  },
                }, "取消"),
              ]),
            ]),
          ]);
        },
      };

      // 打开对话框
      useDialog({
        componentInstance: FormComponent,
        componentProps: {
          initialForm: {
            name: "张三",
            age: 18,
            email: "zhangsan@example.com",
          },
        },
        dialogProps: {
          title: "表单对话框",
          width: "500px",
          top: "10vh",
        },
        close: (type, componentRef, done) => {
          if (type === "submit") {
            console.log("表单提交:", componentRef.form);
            // 可以在这里处理表单数据
            alert(
              "表单提交成功！\n" + JSON.stringify(componentRef.form, null, 2),
            );
          }
          done();
        },
      });
    },
  },
};
</script>
<template>
  <el-button type="primary" @click="openFormDialog">打开表单对话框</el-button>
</template>

# 使用 H 函数

<script>
import { useDialog } from "../index";

export default {
  methods: {
    openHFunctionDialog() {
      // 使用 h 函数创建组件
      const HFunctionComponent = {
        render(h) {
          return h(
            "div",
            {
              style: {
                padding: "20px",
              },
            },
            [
              h("h3", "H 函数对话框示例"),
              h("p", "这是使用 Vue h 函数创建的对话框内容"),
              h(
                "div",
                {
                  style: {
                    marginTop: "20px",
                    display: "flex",
                    justifyContent: "flex-end",
                    gap: "10px",
                  },
                },
                [
                  h(
                    "el-button",
                    {
                      props: {
                        type: "primary",
                      },
                      on: {
                        click: () => this.$emit("close", "confirm"),
                      },
                    },
                    "确定",
                  ),
                  h(
                    "el-button",
                    {
                      on: {
                        click: () => this.$emit("close", "cancel"),
                      },
                    },
                    "取消",
                  ),
                ],
              ),
            ],
          );
        },
      };

      // 打开对话框
      useDialog({
        componentInstance: HFunctionComponent,
        dialogProps: {
          title: "H 函数对话框",
          width: "400px",
          top: "20vh",
        },
        close: (type, componentRef, done) => {
          console.log("对话框关闭，类型:", type);
          done();
        },
      });
    },
  },
};
</script>
<template>
  <el-button type="primary" @click="openHFunctionDialog"
    >打开 H 函数对话框</el-button
  >
</template>

# 异步加载组件

# 标题插槽示例

<script>
import { useDialog } from '../index';

export default {
  data() {
    return {
      pageTitle: '当前页面标题',
    };
  },
  methods: {
    openTitleSlotDialog() {
      // 定义内容组件
      const ContentComponent = {
        props: ['pageTitle'],
        render(h) {
          return h('div', {
            style: {
              padding: '20px',
            },
          }, [
            h('h3', '标题插槽示例'),
            h('p', `当前页面标题: ${this.pageTitle}`),
            h('p', '这是一个使用组件加载方式的标题插槽示例，在标题后面添加了状态按钮。'),
            h('el-button', {
              style: {
                marginRight: '10px',
              },
              on: {
                click: () => this.$emit('close', 'cancel'),
              },
            }, '取消'),
          ]);
        },
      };

      // 定义标题插槽组件
      const TitleSlotComponent = {
        props: ['componentProps'],
        methods: {
          handleStatus1() {
            console.log('点击了状态按钮 1');
            // 这里可以添加状态按钮 1 的逻辑
          },
          handleStatus2() {
            console.log('点击了状态按钮 2');
            // 这里可以添加状态按钮 2 的逻辑
          },
        },
        render(h) {
          const pageTitle = this.componentProps?.pageTitle || '默认标题';
          return h('div', {
            style: {
              display: 'flex',
              alignItems: 'center',
              width: '100%',
            },
          }, [
            h('span', `自定义标题 - ${pageTitle}`),
            h('div', {
              style: {
                display: 'flex',
                gap: '8px',
              },
            }, [
              h('el-button', {
                props: {
                  size: 'small',
                  type: 'success',
                },
                on: {
                  click: this.handleStatus1,
                },
              }, '状态 1'),
              h('el-button', {
                props: {
                  size: 'small',
                  type: 'warning',
                },
                on: {
                  click: this.handleStatus2,
                },
              }, '状态 2'),
            ]),
          ]);
        },
      };

      // 打开对话框
      useDialog({
        componentInstance: ContentComponent,
        componentProps: {
          pageTitle: this.pageTitle,
        },
        titleSlot: TitleSlotComponent,
        dialogProps: {
          width: '500px',
          top: '20vh',
        },
        close: (type, componentRef, close) => {
          console.log('对话框关闭，类型:', type);
          close();
        },
      });
    },
  },
};
</script>
<template>
  <div>
    <el-button type="primary" @click="openTitleSlotDialog">打开标题插槽示例</el-button>
  </div>
</template>

# useDialog(options)

# 参数

参数	说明	类型	默认值	可选值
`componentInstance`	要在对话框中显示的组件实例	Object/Function	-	必需
`componentProps`	传递给组件的属性	Object	{}	-
`dialogProps`	传递给 el-dialog 的属性	Object	见下文	-
`titleSlot`	自定义标题插槽，支持函数或组件对象	Function/Object	null	-
`target`	对话框挂载的目标元素	HTMLElement	document.body	-
`close`	关闭回调函数	Function	-	-

# dialogProps 默认值

{
  modal: false,
  top: "0",
  closeOnClickModal: false,
  closeOnPressEscape: false,
}

# close 回调函数参数

参数	说明	类型
`type`	关闭类型，`_close` 表示点击 X 或遮罩层关闭	String
`componentRef`	对话框中组件的实例引用	Object
`close`	关闭对话框的函数	Function

# 返回值

返回一个 DialogInstance 实例，包含以下方法：

方法	说明	参数
`close()`	关闭对话框	-

# 关闭对话框

# 1. 通过组件内部触发

在对话框内的组件中，通过 $emit('close', type) 触发关闭：

// 在组件内部
this.$emit('close', 'confirm'); // 传递关闭类型

# 2. 通过 close 回调函数

在 close 回调函数中，调用 close() 方法关闭：

close: (type, componentRef, done) => {
  // 处理逻辑
  done(); // 调用 done 方法关闭对话框
};

# 3. 通过对话框实例

保存对话框实例，后续可以通过实例调用 close() 方法：

// 打开对话框并保存实例
const dialogInstance = useDialog(options);

// 后续需要关闭时
setTimeout(() => {
  dialogInstance.close();
  
}, 3000);

# 注意事项

组件引用：通过 close 回调函数的 componentRef 参数可以获取对话框中组件的实例，用于访问组件的方法和数据
对话框配置：dialogProps 支持 Element UI el-dialog 组件的所有属性，详细配置请参考 Element UI 文档 (opens new window)
拖拽功能：对话框默认支持拖拽，通过 v-dragDialog 指令实现
性能优化：对话框关闭后会自动销毁组件实例并从 DOM 中移除，无需手动清理

# 常见问题

# Q: 如何在对话框中使用异步操作？

A: 可以在组件内部使用异步操作，完成后通过 $emit('close', type) 触发关闭：

// 在组件内部
async handleSubmit() {
  try {
    await this.$axios.post('/api/submit', this.form);
    this.$emit('close', 'success');
  } catch (error) {
    this.$emit('close', 'error', error);
  }
}

# Q: 如何自定义对话框的样式？

A: 可以通过 dialogProps 传递 customClass 属性，然后在 CSS 中定义样式：

const dialogInstance = useDialog({
  // ...
  dialogProps: {
    title: '自定义样式对话框',
    customClass: 'my-dialog',
  },
});

/* 自定义对话框样式 */
.my-dialog {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

← LdTable 表格