Vue3之对Dialog的简单封装

news2025/1/21 7:58:50

    之前使用的UI框架,无论是Element UI/Plus 还是 Ant design,其中Dialog组件中的结构和样式都难以修改,无论是使用less、deep还是其他方法,对其组件中css的修改都不生效(不确定是否有其他解决方法),所以我就自己简单封装了一个Dialog组件,只是简单实现了遮蔽层以及Dialog外框,内在具体实现,例如Header、Main、Footer的css和其他内容全部交给程序员决定。

以下是Dialog组件代码

<template>
  <teleport to="body" v-if="visible">
    <div class="box">
      <div class="dialog">
      
        <slot name="header">
          <div class="header">
            <template v-if="title">
              {{title}}
            </template>
            
            <!-- 下面这行代码是关闭按钮的icon图标,即形似 X 的图标,以下代码来自于Element Plus Icon库,若没有引入Element Plus Icon库,建议相应进行修改 -->
            <el-icon class="closeIcon"
                     @click.stop="closeDialog"
                     color="grey">
             <Close />
             
            </el-icon>
          </div>
        </slot>

        <!--default slot-->
        <slot ></slot>

        <slot name="footer">

        </slot>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  name: "Dialog",
  props:{
    visible:{
      type:Boolean,
      required:true
    },
    height:{
      type:String,
      required: false,
      default:'400px'
    },
    width:{
      type:String,
      required:false,
      default: '500px'
    },
    title:{
      type:String,
      required:false
    }
  },
  setup(pros,context){
    //关闭Dialog
    const closeDialog=()=>{
     context.emit('update:visible',false);
    };
    return{
      closeDialog
    }
  }
}
</script>

<style scoped>
.box{
  background-color:rgba(0,0,0,0.5);
  height: 100vh;
  width: 100%;
}
.dialog{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  height: v-bind(height);
  width: v-bind(width);
  background-color: white;
}
.header{
  --height: 50px;
  height: var(--height);
  background-color: #ced6e0;
  line-height: var(--height);
  font-size:22px;
  letter-spacing: 10px;
  text-align: center;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}
.closeIcon{
  position: absolute;
  right: 6px;
  top: 6px;
  cursor: pointer;
}
</style>

以上代码使用了Vue3的teleport标签,用于之间将teleport标签中的html结构将指定body标签中。
使用了visible属性控制Dialog的存在与消亡,剩余的title属性控制组件标题,不写则不显示标题,heightwidth分别控制组件高度和宽度,不写则使用默认值,这两个值都是String类型,使用500px50vh50em等单位长度都能成功赋值

组件的使用方式:<Dialog v-model:visible="visible" > </Dialog>
使用v-model:visible使父子组件双向绑定visible属性的值,在Vue2中,则是v-model:asyn写法

<Dialog v-model:visible="visible" > </Dialog>内编写html结构要点:

  • <template v-slot:header > Here is header </template>
    代码中编写组件Header内容,包括标题和关闭图标都需要自己编写,如果不使用header插槽,则使用默认的样式结构
  • <template v-slot:default> Here is default </template>
    代码中编写组件的主体内容,可以省略这段代码直接写在外层
  • <template v-slot:footer> Here is footer </template>
    代码中编写组件的尾部内容,主要是编写确定和取消按钮

测试代码一

<template>
  <Dialog v-model:visible="visible" >
    <template v-slot:header>
      <div>
        123
      </div>
    </template>
    
    <template v-slot:default>
      <div>
        123
      </div>
    </template>
    
    <template v-slot:footer>
      <div>
        123
      </div>
    </template>
    
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog";
import {ref} from "vue";

export default {
  name: "Test",
  components: {Dialog},
  setup(){
    const visible=ref(true);
    return{
      visible
    }
  }
}
</script>

<style scoped>

</style>

在这里插入图片描述

测试代码二

  <Dialog v-model:visible="visible" title="设置" height="400px" width="450px">
    Hello World
  </Dialog>

在这里插入图片描述

以上代码仅仅是简单的封装,若是想向外暴露控制更多的样式,请自行动态绑定class或者使用v-bind()动态赋予样式属性值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/156190.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【小白必看】2023年PMP考试报名时间,报考条件,超全PMP备考指南

PMP 考试一年能考四次&#xff0c;分别是3月、6月、9月、12月&#xff0c;提前 2 个月开始报名&#xff0c;但还是要关注PMI/基金会官网的信息&#xff0c;有特殊情况的会在官网公布。现在放开了&#xff0c;2023年PMP 考试应该不会再延期了&#xff0c;之前没考上的&#xff0…

重装系统win11的步骤和详细教程

想要给电脑重装系统win11使用&#xff0c;但是自己对于相关的重装操作不熟悉怎么样?我们可以网上的小白装机工具实现&#xff0c;那么具体怎么重装系统win11?下面就演示下重装系统win11的步骤和详细教程。 工具/原料&#xff1a; 系统版本&#xff1a;Windows 11 品牌型号…

js使用小顶堆构建优先级队列

什么是优先级队列? 优先级队列是队列的一个变种,队列是一个先进先出的结构,在头部出队元素在尾部入队元素, 优先级队列顾名思义就是给每个元素具备了优先级,优先级决定了元素在队列中的存储位置,优先级越高的越靠前越先出队 小顶堆又是什么? 小顶堆是堆结构的一个分支,堆…

浙大MEM提面优秀成功上岸经验分享——完全准备才能“聊”的好

近期元旦放假&#xff0c;终于有时间写一写关于自己浙大MEM提面上岸的一些经验分享了。这篇可能对接下来参加2024年浙大mem考试的考生会有一些作用。因为我是参加了提前批面试&#xff0c;并在面试中取得了优秀的资格&#xff0c;所以这也为我后续的联考和录取环节减轻了不少的…

[JAVA安全]filter 内存马

原理&#xff1a; Servlet 有自己的过滤器 filter &#xff0c; 可以通过自定义的过滤器&#xff0c;来对用户的请求进行拦截等操作。 经过filter 之后才会刀Servlet &#xff0c;如果我们动态创建一个 filter 并且将其放在最前面&#xff0c;我们的filter 就会最先被执行&…

Java多线程案例——线程池及ThreadPoolExecutor类

一&#xff0c;线程池1.为什么会有线程池&#xff1f;线程池和多线程的区别&#xff1f;为了很好的解决高并发问题&#xff0c;提高计算机的运行效率&#xff0c;提出了多线程来取代多进程&#xff08;因为一个线程的创创建、销毁和调度比进程更加“轻量”&#xff0c;所以线程…

杰卡德相似度(Jaccard)详解及在UserCF中的应用

1、杰卡德相似度(Jaccard) 这个是衡量两个集合的相似度一种指标。 两个集合A和B的交集元素在A&#xff0c;B的并集中所占的比例&#xff0c;称为两个集合的杰卡德相似系数&#xff0c;用符号J(A,B)表示 另一种表示的方法&#xff1a; jaccard系数衡量维度相似性 jaccard系数很…

IT运维.服务器常见资质认证

3C证书 强制要求 CCC认证的全称为“中国强制性产品认证“ 它是为保护消费者人身安全和国家安全、加强产品质量管理、依照法律法规实施的一-种产品合格评定制度。, 节能

spring之动态代理

文章目录前言一、JDK动态代理1、业务接口OrderService2、目标对象OrderServiceImpl3、客户端程序Client4、InvocationHandler 的实现类TimeInvocationHandler5、运行结果二、CGLIB动态代理1、先引入依赖2、目标类 UserService3、客户端程序Client4、MethodInterceptor的实现类T…

温振传感器的信号输出方式及应用领域

在振动测量系统中&#xff0c;测量振动的仪器排在前端。温振传感器也称为温度振动传感器&#xff08;变送器&#xff09;&#xff0c;它可以将被测对象的振动量&#xff08;位移、速度&#xff09;准确接受后&#xff0c;并将此机械量转换为电信号显示出来。 在工业生产、食品…

内存对齐(memory align)

0. 内存结构 我们平时所称的内存也叫随机访问存储器&#xff08;random-access memory&#xff09;也叫RAM。而RAM分为两类&#xff1a; 一类是静态RAM&#xff08;SRAM&#xff09;&#xff0c;这类SRAM用于前边介绍的CPU高速缓存L1Cache&#xff0c;L2Cache&#xff0c;L3C…

不求星光灿烂,但愿岁月静好

作者&#xff1a;非妃是公主 专栏&#xff1a;《程序人生》 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录不求星光灿烂&#xff0c;但愿岁月静好说一说这一年的自己的收获吧2022年的追求自我学会拒绝尝试表达…

Unreal单播委托

单播委托只能注册一个函数:无参无返回值给委托绑定函数:判断如果委托有绑定函数就发起广播:解绑:绑定方式除了BindUObject,还有BindUFunction,通过这种方式绑定需要给函数添加UFUNCTION标记:还有BindLambda匿名函数:BindRaw可以绑定原生C类中的函数:无参有返回值定义委托类型:声…

Linux进程状态与系统负载检测

1.基础知识-进程的5个状态进程可以分为五个状态&#xff0c;分别是&#xff1a;1&#xff09;创建状态一个应用程序从系统上启动&#xff0c;首先就是进入创建状态&#xff0c;需要获取系统资源创建进程管理块&#xff08;PCB&#xff09;完成资源分配。2) 就绪状态在创建状态完…

Dextran-Azide,Dextran-N3结构式;叠氮修饰的葡聚糖 科研用试剂说明

Dextran-N3,叠氮基团葡聚糖 英文名称&#xff1a;Dextran-Azide,Dextran-N3 中文名&#xff1a;叠氮修饰的葡聚糖 存储条件&#xff1a;-20C&#xff0c;避光&#xff0c;避湿 外观: 固体或类白色絮状&#xff0c;取决于分子量 溶剂&#xff1a;溶于大部分有机溶剂&…

kafka单节点部署,手把手从零到一

kafka单节点部署 书接上回&#xff1a;zookeeper单节点部署&#xff0c;手把手从零到一 建议配套观看 2、kafka的单节点部署 2.1、下载 这里如果和zookeeper相似的就不再赘述&#xff0c;直接上命令 wget https://archive.apache.org/dist/kafka/2.8.2/kafka_2.12-2.8.2.tgz…

深入了解ArrayBlockingQueue 阻塞队列

1. 前言 开始正式了解阻塞队列之前&#xff0c;我们需要了解什么是队列。 队列有什么作用。其实队列的作用就是解耦&#xff0c;更加确切的说应该是生产者以及消费者 之间的解耦 今天就让我们来看下ArrayBlockingQueue 的实现。虽然通过名称就可以看到&#xff0c;无非是通过数…

Theory for the information-based decomposition of stock price

文章目录MotivationThe potential of Brogaard DecompositionIntuitions for Brogaard decompositionTechnique details in Brogaard decompositionDefine the VAR systemIdentify the VAR systemVariance decompositionSummaryMain ReferencesMotivation Brogaard et al. (20…

1000字带您了解网络设备的接口分类和接口编号规则

通过本文&#xff0c;您可以了解到设备的接口分类和接口编号规则。 文章目录一、接口分类1.1 物理接口1.1.1 管理接口1.1.1 业务接口LAN侧接口WAN侧接口1.2 逻辑接口二、接口编号规则2.1 物理接口编号规则三、总结一、接口分类 接口是设备与网络中的其它设备交换数据并相互作用…

3.3 行列式的几何意义

文章目录二维面积三维体积多维体积行列式是线性代数一个非常重要的内容&#xff0c;也是非常难的领域.行列式在欧几里得空间里还有特殊的几何意义。二维面积 &esmp; 两个向量围成的平行四边形的面积就是这两个向量组成的矩阵的行列式的绝对值。以两个向量(3.−2)T(3.-2)^…