vue3优雅的使用useDialog

在日常开发时,弹窗是一个经常使用的功能,而且重复性极高,你可能会遇到下面这些问题:

1、一个页面内多个弹窗, 要维护多套状态,看的眼花缭乱

2、弹窗内容比较简单,不想单独维护一套变量

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

js 复制代码
Dialog({
    title: 'xxx',
    render: () => xxx
})

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

通过配置项调用

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

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

js 复制代码
<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 class="container">
    <button @click="openMessageBox">
      打开messagebox
    </button>
  </div>
</template>

效果如下:

vueuse的createTemplatePromise

如果你不想使用jsx,而是想使用模板,vuehooks工具库vueuse中提供了 createTemplatePromise 这个函数用来创建对话框、模态框、Toast 等,并且完全使用的是template的方式,因此自定义程度更高,并且没有任何额外成本(不需要jsx)。

下面是一个createTemplatePromise结合el-dialog的例子:

js 复制代码
<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 class="container">
    <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变成这样有什么好处呢?

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

相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放5 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
yanlele7 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
markyankee1019 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
前端小巷子10 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘11 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹11 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_9709563912 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js