@sunwise/use-el-dialog v1.0.2

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 的属性，在此基础之上还实现了其他属性

Methods

Events

Slots

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