# @sunwise/use-el-dialog

> 通过hook方式调用element-plus的el-dialog

Latest version **1.0.2** (published 2023-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sunwise/use-el-dialog
pnpm add @sunwise/use-el-dialog
yarn add @sunwise/use-el-dialog
bun add @sunwise/use-el-dialog
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-12-20 |
| First published | 2023-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | zuopf769 |
| Maintainers | zuopengfei |
| Keywords | vue, vue3, element-plus, vite, dialog |

## Links

- npm: https://www.npmjs.com/package/@sunwise/use-el-dialog
- Repository: https://github.com/sunwise-fe/use-el-dialog
- Homepage: https://github.com/sunwise-fe/use-el-dialog#readme
- Issues: https://github.com/sunwise-fe/use-el-dialog/issues
- npm.io page: https://npm.io/package/@sunwise/use-el-dialog

## Dependencies (1)

- [element-plus](https://npm.io/package/element-plus.md) ^2.3.14

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-12-20
- 1.0.0 — 2023-12-17

## README

# use-el-dialog

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

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

支持环境：vue3 + element-plus

## 你可能以往这样使用 <el-dialog />

```vue
<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

```bash
cd demo
yarn run dev
```

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

main.js 中

```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

```vue
<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。

---
_Source: https://npm.io/package/@sunwise/use-el-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._