likes
comments
collection
share

手把手教你以最简单的方式封装 Vue3 模态(Modal) 类组件

作者站长头像
站长
· 阅读数 300

反馈型组件,是前端经常涉及的组件,它们允许向用户提供提醒、提供更多选项或添加额外信息,而不会弄乱主要内容。

在 Vue 中 Modal 类组件使用通常分为两种方式

  • 组件声明模式(declarative
<template>
    <dialog v-model="show" @ok="onOk" @close="onClose">
        <div class="model__title">title</div>
        <div class="model__conent">content</div>
    </dialog>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
    setup() {
        const show = ref(false)
        const onOk = () => {
            // ...
        }
        const onClose = () => {
            // ...
        }
        return { show, onOk, onClose }
    }
})
</script>

优点:定制化程度高、限制低,可以最大程度的发挥主管设计想法

缺点:复用性差、使用频繁时需要定义多份 { show, onOk, onClose } 代码,代码冗余。

  • 函数调用模式(imperative
Modal.confirm({
    title: '...',
    contnet: '...'
})
    .then(() => {/* ok */})
    .catch(() => { /* close */})

优点:数据独立与页面独立、复用性、通用性强、业务代码流程易懂、无法继承上下文

缺点:涉及到定制化将很难处理,往往需要编写 template 字符串 / jsx 代码

弹出层组件涉及思路

说了那么多,也该进入主题了。在前端发展至今为止,这类组件的封装已经有了广泛的累积,

其中函数调用(imperative)无非就是利用了 vuerender 能力,将一个组件直接渲染至 html 当中,但实际做起来还是相当麻烦,需要处理 render销毁的时机,还需要想办法将处理函数传递给组件自身,且无法和组件声明模式相结合使用。

并且考虑在实际项目开发当中,我们可能并不会考虑重头实现一个 dialog 组件,而是使用第三方组件库自带的去魔改,实际上就会遇到各种各样的问题。

综上考虑成本还是过高,但还是有可解决的思路,所以我们明确以下几点要求:

  • 组件可支持组件声明、函数调用两种模式(declarative and imperative
  • 定制化能力强、开发成本低,以最简单的方式制作模态类组件
  • 使用现有组件库(如 element-plus)集成和定制化功能
  • 支持组件继承全局应用上下文

那么基于上面几点,普通原始(vue render / tempalte)的方式封装就不能满足我们的需求,我们需要一个趁手的工具帮我们做这些事情。

笔者将这套逻辑抽离了出来,形成了一套完整的 Vue3 弹出层解决方案 unoverlay-vue,它可以满足我们上述的所有要求。

关于实现基层原理方面,本文不作过多展示,可以查看笔者以往文章 # Vue3 模态框封装方案

⚙️ Install

pnpm add unoverlay-vue
# Or Yarn
yarn add unoverlay-vue

在 main.js 中全局安装可以使所有弹出层继承上下文

// main.js
import { createApp } from 'vue'
import unoverlay from 'unoverlay-vue'
import App from './App.vue'

const app = createApp(App)
app.use(unoverlay)
app.mount('#app')

实现基础的 Modal 功能

定义 Model 组件,这里以最简案例实现,不包含动画逻辑(可以使用 <Transition> 实现)

你可以大胆地发挥你的想象力

<!-- Model.vue -->
<template>
  <!-- 动画可以使用 -->
  <div v-show="visible">
    <div>{{ title }}</div>
    <button @click="confirm(`${title}:confirmed`)"> confirm </button>
    <button @click="cancel()"> cancel </button>
  </div>
</template>
<script setup>
import { defineEmits, defineProps } from 'vue'
import { useOverlayMeta } from 'unoverlay-vue'
const props = defineProps({
  title: String,
  // 如果您想将其用作 template 中的组件使用,
  // 你需要在 props 中定义 visible 字段
  visible: Boolean
})

// 定义组件中使用的事件(可选)
// 在组件中使用会有事件提示
defineEmits(['cancel', 'confirm'])

// 从 useOverlayMeta 获取 Overlay 信息
const { visible, confirm, cancel } = useOverlayMeta({
  // 弹出层动画的持续时间, 可以避免组件过早被销毁
  // 仅在 template 中使用则不需要定义
  animation: 1000
})
</script>

创建函数调用回调(imperative), 在 Javascript / Typescript 中调用

import { transformOverlay } from 'unoverlay-vue'
import Model from './Model.vue'

// 转换函数调用模式(imperative)
const ModelCallbck = transformOverlay(Model)
// 调用并获取 confirm 回调的值
const value = await ModelCallbck({ title: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"

或者任意地方直接调起组件

import { useOverlayCall } from 'unoverlay-vue'
import Model from './Model.vue'

const value = await useOverlayCall(Model, {
  props: { title: 'useOverlay' }
})
// value === "useOverlay:confirmed"

或者在 template 中以组件声明模式(declarative)使用

<template>
  <Model
    v-model:visible="visible"
    title="useTemplate"
    @confirm="confirm"
    @cancel="cancel"
  />
<script setup>
import Model from './Model.vue'
const visible = ref(false)
const confirm = (value) => {/* value === 'useTemplate:confirmed' */}
const cancel = () => {/*...*/}
</script>

useOverlayMetaunoverlay-vue 的核心函数,它基于 Vue 的依赖注入实现

  • transformOverlay 转换后,内部使用 Provider 携带的具有销毁组件自身、调取 Propmise 的功能
  • template 中使用,内部使用组件的 model,调用组件自身的 emits (confirm,cancel)

transformOverlay 可以将使用 useOverlayMeta 的组件转换为具有 Providerrender 函数

useOverlayCalltransformOverlay 的变体写法,直接作用就是直接调取命令回调。

基于第三方组件库定制化

element-plus@2.15.7(dialog)为例(你也可以使用其他组件库)

<!-- MyDialog.vue -->
<template>
  <el-dialog v-model:visible="visible" :title="title" @close="cancel()">
    <!-- 你的定制化内容 -->
    <button @click="confirm(`${title}:confirmed`)" />
  </el-dialog>
</template>
<script setup>
import { defineEmits, defineProps } from 'vue'
import { useOverlayMeta } from 'unoverlay-vue'
const props = defineProps({
  title: String,
})

const { visible, confirm, cancel } = useOverlayMeta({
  animation: 2000
})
</script>

创建函数调用回调(imperative), 在 Javascript / Typescript 中调用

import { transformOverlay } from 'unoverlay-vue'
import MyDialog from './MyDialog.vue'

const MyDialogCallback = transformOverlay(MyDialog)
const value = await MyDialogCallback({ title: 'myElDialog' })
// value === "myElDialog:confirmed"

怎么样,使用起来是不是超简单,还支持 Typescript 和自定义 appContext

更多用法可以参考 unoverlay-vue 中文文档

总结与思考

作为一名前端优秀的前端工程师, 面对各种繁琐而重复的工作, 我们不应该按部就班的去"辛勤劳动",而是要根据已有前端的开发经验, 总结出一套的高效开发的方法。

我们总有更好的办法和思路实现,不是吗~