use-el-dialog - 通过 hook 方式调用 el-dialog

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

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

支持环境:vue3 + element-plus

npm: www.npmjs.com/package/use...

github: github.com/HuziG/use-e...

Demo: stackblitz.com/edit/vitejs...

文档: use-el-dialog.vercel.app/

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

html 复制代码
<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 状态,弹框的展示与隐藏等控制,实现这些功能,需要通过声明大量的额外变量进行控制。

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

main.js 中

js 复制代码
import App from 'vue';
import ElementPlus from 'element-plus';
import BasicElDialog from 'use-el-dialog';

App.use(ElementPlus)
App.use(BasicElDialog)

vue file

html 复制代码
<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 - Confirm
cancelBtuText 弹框取消按钮文案 string - Cancel
reload 弹框每次展示时是否触发子组件重载 boolean - false

Methods

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

Events

名称 说明 类型
on-ok 按钮"确认"回调 Function
on-cancel 按钮"取消"回调 Function

Slots

名称 说明
header 头部
default 中间
footer 脚部

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

相关推荐
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜051 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句1 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿1 小时前
Web第二次笔记
前端·javascript
良辰未晚1 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀1 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer1 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js