用Vue3.0 如何实现一个自定义Modal？

gxw_viva

已于 2024-03-04 11:57:48 修改

阅读量677

点赞数 5

分类专栏： vue3学习笔记文章标签：前端 javascript vue.js

于 2024-02-26 17:56:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43995143/article/details/136305484

版权

本文详细介绍了如何在Vue3中实现一个可定制的Modal组件，包括组件结构、目录组织、内容动态展示、API调用方式以及事件处理的CompositionAPI实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求分析

实现一个Modal组件，首先确定需要完成的内容：

遮罩层
标题内容
主体内容
确定和取消按钮

主体内容需要灵活，所以可以是字符串，也可以是一段 html 代码

特点是它们在当前vue实例之外独立存在，通常挂载于body之上

除了通过引入import的形式，我们还可通过API的形式进行组件的调用。

二、实现流程

首先看看大致流程：

目录结构
组件内容
实现 API 形式
事件处理
其他完善

目录结构

Modal组件相关的目录结构

├── plugins
│   └── modal
│       ├── Content.tsx // 维护 Modal 的内容，用于 h 函数和 jsx 语法
│       ├── Modal.vue // 基础组件
│       ├── config.ts // 全局默认配置
│       ├── index.ts // 入口
│       ├── locale // 国际化相关
│       │   ├── index.ts
│       │   └── lang
│       │       ├── en-US.ts
│       │       ├── zh-CN.ts
│       │       └── zh-TW.ts
│       └── modal.type.ts // ts类型声明相关

因为 Modal 会被 app.use(Modal) 调用作为一个插件，所以都放在plugins目录下

组件内容

首先实现modal.vue的主体显示内容大致如下

<Teleport to="body" :disabled="!isTeleport">
    <div v-if="modelValue" class="modal">
        <div
             class="mask"
             :style="style"
             @click="maskClose && !loading && handleCancel()"
             ></div>
        <div class="modal__main">
            <div class="modal__title line line--