高效前端开发：使用 @overlastic/vue 快速创建命令式模态框

大家应该都有使用过 element-plus 的 dialog 组件，不知道你们有没有这样的烦恼，确实使用 template 的话定制化程度高、限制低，可以最大程度的发挥设计想法，状态流程可控性强，也便于调试。

但往往有一些通用的组件又会导致复用性差、使用频繁时需要定义多份一些字段 show, onOk, onClose，在开发中就会导致效率变低。

Overlastic 提供了一套标准流程用于创建消息或对话框，并将你的 UI 定义为 Promise，并支持在不同的框架中使用。

• github.com/hairyf/over…

创建弹窗组件是一个重复且耗时的任务。而每次重用这类组件时，都需要重复定义 reject、resolve 和 visible 等公共字段。此外，控制这个过程（clear data→open Model→edit data→onConfirm→save data）也会导致大量冗余代码，尤其是对于一些全局组件。

Overlastic 简化了弹出层的创建，通过减少冗余流程和管理相应状态。它能够有效地创建命令式组件，同时支持声明式使用。

定制 Dialog 组件

@overlastic/vue 可以基于第三方的组件库，实现命令式调用，我们这里使用 Element Plus 的 Dialog 组件作为示例。

<!-- MyDialog.vue -->
<script setup>
import { defineProps } from 'vue-demi'
import { useExtendOverlay } from '@overlastic/vue'

const props = defineProps({ title: String })

const { visible, deferred } = useExtendOverlay({
  duration: 1000 // dialog 的动画延迟
})
</script>

<template>
  <el-dialog v-model="visible" :title="title" @close="deferred.reject()">
    <!-- 你的定制化内容 -->
    <button @click="deferred.resolve(`${title}:confirmed`)" />
  </el-dialog>
</template>

使用 defineOverlay 方法将组件转换为模态对话框，该方法允许在你 Javascript/Typescript 中调用它：

import { defineOverlay } from '@overlastic/vue'
import MyDialog from './MyDialog.vue'

// 转换为回调方法
const callback = defineOverlay(MyDialog)
// 调用组件并获取 resolve 回调的值
const value = await callback({ title: 'MyElDialog' })
// value === "callbackOverlay:confirmed"

使用 defineOverlay 不会携带组件的上下文，调用函数时需要提供 context 字段，或使用 Inject Provider 模式（推荐）

Template

使用 @overlastic/vue 创建的组件，除了支持使用回调方法调用以外，仍然支持在 <template> 中使用，这在迁移旧组件时非常有用。

在 Dialog 中使用，需要显式定义 modal 与 event，默认下使用visible|resolve|reject，我们可以通过配置更改：

const props = defineProps({
  title: String,
  modalValue: Boolean
})

defineEmits(['nook', 'ok'])

const { visible, resolve, reject } = useExtendOverlay({
  events: { resolve: 'ok', reject: 'nook' },
  model: 'modalValue',
})

在其他组件中使用：

<script setup>
import MyDialog from './MyDialog.vue'
const visible = ref(false)

function resolve(value) {
  // ...
}
function reject(value) {
  // ...
}
</script>

<template>
  <MyDialog v-model="visible" title="Hairyf" @ok="resolve" @nook="reject" />
</template>

外部控制

除此之外，Overlastic 转换的函数还支持允许在调用模态框的同时，通过 resolve 和 reject 在外部进行控制流程。

const instance = callback({/* you props */})

function close() {
  instance.reject('no')
  instance.catch((value) => {
    // log: no
    console.log(value)
  })
}
function yes() {
  instance.resolve('yes')
  instance.then((value) => {
    // log: yes
    console.log(value)
  })
}

小结

通过 Overlastic，可以减少定义 Dialog、Modal 等模版代码，从而提升开发效率，除此之外 Overlastic 还支持其他框架（React、Vue、Svelte），和好几种转换模式，并支持在外部进行流程的控制，和同时支持 template 中使用。

Overlastic 是一个功能完善的框架，除此之外还有很多功能，实际使用需要配合文档进行开发，选择适合当前项目的方式。