vue3优雅的使用useDialog

更新日期: 2024-03-20阅读: 205标签: 弹窗

在日常开发时,弹窗是一个经常使用的功能,而且重复性极高,你可能会遇到下面这些问题:1、一个页面内多个弹窗, 要维护多套弹窗状态,看的眼花缭乱2、弹窗内容比较简单,声明变量 + 模板语法的方式写起来比较麻烦

关于这些问题, 我首先想到的是应该弄一个即用即走的Dialog,不用去单独维护它的状态,使用Dialog({ xxx })这种形式去调用它,例如下面这种配置的方式:

Dialog({
title: 'xxx',
render: () => xxx
})

其中render可以是一个html字符串,也可以是jsx(需要配置对jsx的支持),这样可以对内容区域实现自定义。


通过配置项调用

各大主流的ui库基本都实现了这种调用方式:

  • Ant Design vue的 Modal
  • Element-plus的 MessageBox

之前没有注意到Element-plus的MessageBox可以使用jsx,大部分场景下,用它来代替Dialog还是很方便的。示例代码:

<script lang="jsx" setup>
import { reactive, ref } from 'vue';
import { ElMessageBox, ElForm, ElFormItem, ElInput } from 'element-plus'

const formRef = ref(null)
const form = reactive({ height: '', width: '' })
const rules = reactive({
height: {
required: true,
trigger: 'blur'
},
width: {
required: true,
trigger: 'blur'
}
})

function openMessageBox() {
ElMessageBox({
title: 'Message',
showCancelButton: true,
// message如果不是函数形式 绑定ref会失败
message: () =>
<ElForm
ref={formRef}
model={form}
rules={rules}
>
<ElFormItem label="height" prop="height">
<ElInput v-model={form.height}></ElInput>
</ElFormItem>
<ElFormItem label="width" prop="width">
<ElInput v-model={form.width}></ElInput>
</ElFormItem>
</ElForm>
,
beforeClose: (action, instance, done) => {
console.log(action, instance)
formRef.value && formRef.value.validate(status => {
console.log('校验状态: ', status)
if (status || action==='cancel') done()
})
}
})
}
</script>

<template>
<div>
<button @click="openMessageBox">
打开messagebox
</button>
</div>
</template>


vueuse的createTemplatePromise

如果你不想使用jsx,而是想使用模板,vue的hooks工具库vueuse中提供了 createTemplatePromise 这个函数用来创建对话框、模态框、Toast 等,并且完全使用的是template的方式,因此自定义程度更高,并且没有任何额外成本(不需要jsx)。下面是一个createTemplatePromise结合el-dialog的例子(当然也可以结合其它的dialog或者自定义dialog):

<script lang="jsx" setup>
import { createTemplatePromise } from '@vueuse/core'
import { ElDialog, ElButton } from 'element-plus'

const TemplatePromise = createTemplatePromise()

async function open(idx) {
console.log(idx, 'Before')
const result = await TemplatePromise.start('Title', `Hello ${idx}`)
console.log(idx, 'After', result)
}

function asyncFn() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('ok')
}, 1000)
})
}
</script>

<template>
<div>
<button @click="open(1); open(2)">
打开两个弹框
</button>
</div>
<TemplatePromise v-slot="{ resolve, args, isResolving }">
<el-dialog :modelValue="true" :title="args[0]">
<div>Dialog {{ args[1] }}</div>
<p>可以打开控制台查看logs</p>
<div class="flex gap-2 justify-end">
<el-button @click="resolve('cancel')">
取消
</el-button>
<el-button type="primary" :disabled="isResolving" @click="resolve(asyncFn())">
{{ isResolving ? 'loading...' : '确认' }}
</el-button>
</div>
</el-dialog>
</TemplatePromise>
</template>

Promise化Dialog的优点

这样有小伙伴可能会说, 这看起来和原来用dialog也没有很大区别啊, 也要写模版 + 函数方法. 那么让dialog变成这样有什么好处呢?

1、最大的好处是弹窗变得可编程了, 通过函数调用的方式来控制UI. 不用再单独声明变量控制显隐, 也不用单独再去控制按钮的禁用、loading等状态. 例如以上的例子中, 我们可以轻松的处理button的loading状态(不用再额外声明变量), 用Promise让Dialog的UI和状态实现了內聚.

2、相比第一种方式, 对UI的可自定义程度更高.


demo地址

代码地址:https://github.com/plutda/functional-dialog

在线预览地址:https://plutda.github.io/functional-dialog

作者:隔壁老王z
https://juejin.cn/post/7293173815181738022

链接: https://www.fly63.com/article/detial/12690

页面弹窗toast和加载loading

都采用单例模式,原生js实现,兼容老版本浏览器内核,请将用es6语法的地方作修改.loading 加载代码: 样式全部通过js创建style标签注入head中,若需修改,请修改loadignStyle和loadignChildStyle 的值即刻。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

搞懂extend和$mount原理并实现一个命令式Confirm弹窗组件

如每个使用的地方需要引入该组件,需要注册,需要给组件加ref引用,需要调用事件来控制状态。其实这个组件相对来说是比较独立的,我们在使用组件库的时候

优秀好看的弹窗界面设计

不管是用户还是设计师角色,弹窗界面应该都是经常能碰到的。弹窗(pop-up)能够让用户更聚焦,不用离开当前页面便能轻松快速地完成任务。 但是千篇一律的界面设计很容易让人忽略了它本身的美感。

弹窗和 window 的方法

弹窗自古以来就存在。最初的想法是,在不关闭主窗口的情况下显示其他内容。目前为止,还有其他方式可以实现这一点:我们可以使用 fetch 动态加载内容,并将其显示在动态生成的 <div> 中。弹窗并不是我们每天都会使用的东西。

javaScript实现弹窗拖动

通过原生javaScript进行窗口拖动的实现,通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动

html5 dialog弹窗的使用介绍

说起 dialog 标签,可能很多人都比较陌生,毕竟这个标签直到 HTML5.2 标准固定,也只是 chrome 的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话

别再用alert()做弹窗了,浏览器自带的系统级模态框太好用了!

在很多场景下,都需要弹窗用于交互,一般UI框架都有模态框,如果你做一个小单页,不引入UI库,你将无法使用模态框,或者使用JavaScript自带的alert弹出提醒,或者是自己写,这都不是很便利。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!