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。

相关推荐
枷锁—sha几秒前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜17 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台35 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹41 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法