用Vue3.0 如何实现组件?实现一个 Modal应该怎么设计?

devtools/2024/11/29 19:01:25/

当然,Vue 3.0 提供了非常方便的组件化机制来实现像 Modal 这样的 UI 组件。实现一个 Modal 组件的基本设计思路是:通过一个控制显示与隐藏的 v-ifv-show,然后使用 props 接收外部控制参数,最后通过事件机制通知父组件进行交互。

以下是如何在 Vue 3.0 中实现一个基本的 Modal 组件,并结合实际项目中的代码示例进行讲解。

1. 设计思路

  1. Modal 组件的基本功能

    • 接收 isVisible 属性来控制 Modal 是否显示。
    • 通过 @close 事件将关闭操作通知父组件。
    • 支持自定义的标题和内容(通过插槽)。
    • 点击遮罩层时关闭 Modal。
  2. 设计 Modal 组件的结构

    • 使用 v-if 来控制组件的显示与隐藏。
    • 使用插槽 (slot) 来动态插入标题和内容。
    • 使用 @close 事件在 Modal 关闭时通知父组件。

2. 实现代码

1. 创建 Modal.vue 组件
<template><div v-if="isVisible" class="modal-overlay" @click.self="closeModal"><div class="modal"><div class="modal-header"><h3>{{ title }}</h3><button class="close-btn" @click="closeModal">X</button></div><div class="modal-body"><slot></slot> <!-- 使用插槽显示 Modal 内容 --></div><div class="modal-footer"><button @click="closeModal">

http://www.ppmy.cn/devtools/137992.html

相关文章

国产FPGA+DSP 双FMC 6U VPX处理板

高性能国产化信号处理平台采用6U VPX架构&#xff0c;双FMC接口国产V7 FPGA 国产多核 DSP 的硬件架构&#xff0c;可以完成一体化电子系统、有源相控阵雷达、电子侦察、MIMO 通信、声呐等领域的高速实时信号处理。 信号处理平台的组成框图如图 1 所示&#xff0c; DSP处理器采…

onnx报错解决-bert

一、定义 UserWarning: Provided key output for dynamic axes is not a valid input/output name warnings.warn( 案例 实体识别bert 案例 转transformers 模型到onnx 接口解读 二、实现 https://huggingface.co/docs/transformers/main_classes/onnx#transformers.onnx…

Sqoop的安装和配置,Sqoop的数据导入导出,MySQL对hdfs数据的操作

sqoop的安装基础是hive和mysql&#xff0c;没有安装好的同学建议去看一看博主的这一篇文章 Hive的部署&#xff0c;远程模式搭建&#xff0c;centos换源&#xff0c;linux上下载mysql。_hive-4.0.1-CSDN博客 好的那么接下来我们开始表演&#xff0c;由于hive是当时在hadoop03上…

Android so库的编译

在没弄明白so库编译的关系前,直接看网上博主的博文,常常会觉得云里雾里的,为什么一会儿通过Android工程cmake编译,一会儿又通过NDK命令去编译。两者编译的so库有什么区别? android版第三方库编译总体思路: 对于新手小白来说搞明白上面的总体思路图很有必…

PAT甲级 1056 Mice and Rice(25)

文章目录 题目题目大意基本思路AC代码总结 题目 原题链接 题目大意 给定参赛的老鼠数量为NP&#xff0c;每NG只老鼠分为一组&#xff0c;组中最胖的老鼠获胜&#xff0c;并进入下一轮&#xff0c;所有在本回合中失败的老鼠排名都相同&#xff0c;获胜的老鼠继续每NG只一组&am…

学习HTML第三十三天

学习文章目录 一.fieldset 与 legend 的使用&#xff08;了解&#xff09;二.表单总结三.框架标签 一.fieldset 与 legend 的使用&#xff08;了解&#xff09; fieldset 可以为表单控件分组、 legend 标签是分组的标题 二.表单总结 form表单&#xff1a; action 属性&#…

Spring Boot【四】

单例bean中使用多例bean 1.lookup-method方式实现 当serviceB中调用getServiceA的时候&#xff0c;系统自动将这个方法拦截&#xff0c;然后去spring容器中查找对应的serviceA对象然后返回 2.replaced-method&#xff1a;方法替换 我们可以对serviceB这个bean中的getServiceA…

泷羽sec-linux进阶

基础之linux进阶 声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽…