6.用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？

最新推荐文章于 2025-04-11 19:00:00 发布

kleinBlue.

最新推荐文章于 2025-04-11 19:00:00 发布

阅读量1.4k

点赞数 2

分类专栏： VUE3系列文章标签： vue-cli3

本文链接：https://blog.csdn.net/qq_43299703/article/details/121213475

版权

本文详细介绍了如何在 Vue3 中设计一个可复用的 Modal 组件，包括组件结构、需求分析、实现流程等。组件支持通过传入不同参数展示不同内容，能通过API调用并提供了事件处理功能，如确定和取消按钮的回调。此外，还讨论了如何处理确定和取消事件，以及如何通过Vue3的Composition API实现组件的国际化和TypeScript集成。

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

一、组件设计

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式

现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同

这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可

这样，下次开发相同界面程序时就可以写更少的代码，意味着更高的开发效率，更少的 Bug和更少的程序体积

二、需求分析

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

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

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

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

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

还可以包括配置全局样式、国际化、与typeScript结合

三、实现流程

首先看看大致流程：

目录结构
组件内容
实现 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="

最低0.47元/天解锁文章