elplus-hooks

Element Plus 相关 Vue 组合式函数库（当前仅包含 useDialog）。

安装

npm i elplus-hooks

你还需要在业务项目中安装以下 peer 依赖（若已安装可忽略）：

npm i vue element-plus lodash

导出

import { useDialog } from "elplus-hooks";

API

useDialog<P = any>(content, options?)

参数

• content: string | Component | JSX.Element
• options: DialogOptions<P> | Ref<DialogOptions<P>>

DialogOptions<P>

• dialogProps: 透传给 ElDialog 的属性，额外支持 onBeforeOpen?: () => boolean | void
• dialogSlots: Dialog 插槽（header、footer）
• contentProps: 透传给内容组件 props
• callBack: 内容组件触发回调时执行
• closeEventName: 自定义关闭事件名（默认 closeDialog）
• emits: 事件映射，会自动转换为 onXxx 监听

返回值

• openDialog(modifyOptions?): 打开弹窗，可临时覆盖 options
• closeDialog(): 关闭弹窗

使用示例

import { defineComponent } from "vue";
import { useDialog } from "elplus-hooks";

const ContentComp = defineComponent({
  props: {
    title: String,
    closeDialog: Function
  },
  setup(props) {
    return () => (
      <div>
        <p>{props.title}</p>
        <button onClick={() => props.closeDialog?.()}>关闭</button>
      </div>
    );
  }
});

const { openDialog } = useDialog(ContentComp, {
  contentProps: { title: "弹窗内容" },
  dialogProps: { title: "提示", width: "480px" }
});

openDialog();

法律声明

• 开发者：Zyc
• 联系邮箱：[email protected]
• 详细条款见 LICENSE 与 LEGAL_NOTICE.md

注意事项

• 本库会操作 document.body，请仅在浏览器端调用。
• SSR 场景请在客户端生命周期中调用 openDialog。