use-el-dialog

在过去使用 el-dialog 过程中，我常常需要声明一系列的变量，来进行弹框加载状态的控制，弹框的展示与隐藏。

use-el-dialog 集成了常用的与弹框相关的功能，它包括了确认按钮的状态加载，嵌套组件的重新挂载等功能。实现了通过 hook 方式，直接调用 el-dialog 。

支持环境：vue3 + element-plus

你可能以往这样使用

<template>
  <el-button text @click="dialogVisible = true"> open the Dialog </el-button>

  <el-dialog v-model="dialogVisible" title="Tips" width="30%">
    <span>This is a message</span>
  </el-dialog>
</template>

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

const dialogVisible = ref(false);
</script>

如果实现表单的弹框嵌套，实际逻辑更复杂，涉及到了表单的数据获取，弹框按钮的 loading 状态，弹框的展示与隐藏等控制，实现这些功能，需要通过声明大量的额外变量进行控制。

查看 demo

cd demo
yarn run dev

通过 use-el-dialog 的使用方式

main.js 中

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

import BasicElDialog from "@sunwise/use-el-dialog";
import "@sunwise/use-el-dialog/dist/style.css";

createApp(App)
  .use(BasicElDialog, {
    subBtuText: "确认",
    cancelBtuText: "取消",
  })
  .use(ElementPlus)
  .mount("#app");

vue file

<template>
  <div class="box-container">
    <el-button size="large" @click="handleOpen">Open Dialog</el-button>

    <basic-el-dialog @register="registerDialog" />
  </div>
</template>

<script lang="ts" setup>
import { useElDialog } from "use-el-dialog";

const [registerDialog, dialogMethods] = useElDialog({
  title: "Custom",
});

const handleOpen = () => {
  dialogMethods.openModal();
};
</script>

Attributes

use-el-dialog 继承了 el-dialog 的属性，在此基础之上还实现了其他属性

参数	说明	类型	可选值	默认值	是否必填
subBtuText	弹框确认按钮文案	string	确认	否
cancelBtuText	弹框取消按钮文案	string	取消	否
reload	是否每次弹框展示时触发子组件重载	boolean	false	否
fullscreenIcon	是否显示全屏按钮	boolean	false	否

Methods

名称	说明	参数
openModal	打开弹框	-
closeModal	关闭弹框	-
setSubLoading	设置“确认”按钮加载状态	(state: boolean)
setSubDisabled	设置“确认”按钮不可点击状态	(state: boolean)
setProps	动态设置属性	use-el-dialog attr

Events

名称	说明	参数
on-open	弹窗打开后回调	Function
on-ok	按钮“确认”回调	Function
on-cancel	按钮“取消”回调	Function

Slots

名称	说明	参数
header	头部插槽	-
default	中间插槽	-
footer	脚部插槽	-

use-el-dialog 使用的前提，需要保证 element-plus 正确引入并使用。use-el-dialog 本身并不携带 element-plus。