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。

相关推荐
吃饭睡觉打豆豆嘛9 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端9 小时前
claude code 原理分析
前端
GalaxyMeteor9 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man9 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮9 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0079 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon9 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible10 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua10 小时前
setup函数相关【3】
前端·javascript·vue.js
neon120410 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画