vue3 + ts + element-plus 二次封装 el-dialog

news2024/12/28 6:57:02

实现效果:

组件代码:注意 style 不能为 scoped

<template>

  <el-dialog class="my-dialog" v-model="isVisible" :show-close="false" :close-on-click-modal="false" :modal="false"
             modal-class="my-modal-class" :draggable="props.draggable">
    <template #header>
      <div class="my-header">
        {{ props.title }}
        <div style="cursor: pointer" @click="handleClose">
          <el-icon>
            <CloseBold/>
          </el-icon>
        </div>
      </div>
    </template>
    <div class="my-content">
      <slot name="content"/>
    </div>
  </el-dialog>

</template>

<script setup lang="ts">

import {ref} from "vue";
import {CloseBold} from "@element-plus/icons-vue";

const props = defineProps<{
  isVisible: boolean, // 是否显示
  title: string, // 标题
  draggable: boolean // 是否拖动
}>()

const isVisible = ref(props.isVisible)

const handleClose = () => {
  isVisible.value = false
}

</script>

<style lang="scss">

.my-dialog {
  pointer-events: auto; // 确保弹窗内的点击事件生效
  width: 400px;
  margin: 0;
  padding: 0;
  background: none;
  position: absolute;
  top: 300px;
  left: 500px;

  .el-dialog__header {
    padding-bottom: 0;

    .my-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 30px;
      background: rgba(89, 123, 244);
      color: #FFFFFF;
    }
  }

  .my-content {
    background: #FFFFFF;
    padding: 15px 30px;
    font-size: 16px;
  }
}

.my-modal-class {
  pointer-events: none; // 保证遮罩下的区域点击事件生效
}

</style>

 

使用:v-bind 同时绑定多个属性

<template>

  <custom-dialog v-bind="myDialog">
    <template #content>自定义内容</template>
  </custom-dialog>

</template>

<script setup lang="ts">

import CustomDialog from '@/components/CustomDialog/index.vue'
import {onMounted, ref} from "vue";

const myDialog = ref({
  isVisible: true,
  title: '二次封装el-dialog',
  draggable: true
})

</script>

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

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

相关文章

web网页QQ登录

代码&#xff1a; <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>QQ登录ent</title> </head> <style>ul > li{list-style: none; } a …

U盘数据丢失不用慌,这4个工具可以帮你恢复。

因为将大量的数据存到U盘里面很方便&#xff0c;所以U盘使用也很广泛。但是里面的数据丢失想必很多朋友都碰到过&#xff0c;不过现在有很多方法都可以帮助大家将数据回顾回来。这里我便筛选了几款比较好的数据恢复工具&#xff0c;在这里跟大家分享。 1、福昕U盘恢复软件 直通…

AI练中学,你的 AI 助教又升级啦!

你是否在代码学习过程中遇到过这些问题&#xff1f;理论学习和动手实践割裂&#xff1b;课上的示例代码跑起来很麻烦&#xff1b;需要自己配置开发环境&#xff0c;在服务器上配开发环境要付费&#xff0c;折腾半天之后报错。 在大模型应用开发领域&#xff0c;获取大模型 API…

设计模式:类与类之间关系的表示方式(聚合,组合,依赖,继承,实现)

目录 聚合关系 组合关系 依赖关系 继承关系 实现关系 聚合关系 聚合是一种较弱的“拥有”关系&#xff0c;表示整体与部分的关系&#xff0c;但部分可以独立于整体存在。例如&#xff0c;部门和员工之间的关系&#xff0c;一个部门可以包含多个员工&#xff0c;但员工可以…

MFC工控项目实例二十五多媒体定时计时器

承接专栏《MFC工控项目实例二十四模拟量校正值输入》 用多媒体定时器实现0.1秒计时器 1、在SEAL_PRESSUREDlg.h文件中添加代码 #include<MMSystem.h> #pragma comment(lib,"winmm.lib")class CSEAL_PRESSUREDlg : public CDialog { public:CSEAL_PRESSUREDlg(…

计算机网络基础进阶

三次握手四次挥手 三次握手 1------建立连接----------------------2 ACK1&#xff0c;seq0 2------传输数据&#xff0c;建立连接---------1 1------传输数据&#xff0c;建立连接---------2 三次握手用于建立TCP连接&#xff0c;确保通信双方都准备好进行数据传输。整个…

使用 Git LFS(大文件存储)

Git LFS&#xff08;Large File Storage&#xff09;是一种扩展 Git 的工具&#xff0c;旨在更有效地管理大文件的版本控制。它通过将大文件的内容存储在 Git 之外来解决 Git 在处理大文件时的性能问题。 主要特点 替代存储&#xff1a;Git LFS 不直接将大文件存储在 Git 仓库…

C++类和对象 - 下【匿名对象,友元,static成员】

&#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏: C专栏 目录 ​编辑 再探构造函数 类型转换 static成员 友元 内部类 匿名对象 对象拷⻉时的编译器优化 再探构造函数 之前我们实现构造函数时&#xff0c;初始化成员变量主要使⽤函数体内赋值&#xff0c;…

Mac 远程 Windows 等桌面操作系统工具 Microsoft Remote Desktop for Mac 下载安装详细使用教程

最近需要在 Mac 上远程连接控制我的 windows 电脑系统&#xff0c;经过一番尝试对于 win 来说还是微软自家推出的 Microsoft Remote Desktop for Mac 最最好用&#xff0c;没有之一 简介 Microsoft Remote Desktop是一款由微软公司开发的远程桌面连接工具&#xff0c;可以让用…

Redis遇到Hash冲突怎么办?

这是小伙伴之前遇到的一个面试题&#xff0c;感觉也是一个经典八股&#xff0c;和大伙分享下。 一 什么是 Hash 冲突 Hash 冲突&#xff0c;也称为 Hash 碰撞&#xff0c;是指不同的关键字通过 Hash 函数计算得到了相同的 Hash 地址。 Hash 冲突在 Hash 表中是不可避免的&am…

开源图像超分ECBSR项目源码分析

相关介绍 项目GitHub地址&#xff1a;https://github.com/xindongzhang/ECBSR项目相关论文&#xff1a;https://www4.comp.polyu.edu.hk/~cslzhang/paper/MM21_ECBSR.pdf&#xff08;也可以点这里下载&#xff09;论文解读&#xff1a;Edge-oriented Convolution Block for Re…

CLion远程开发Ubuntu,并显示helloworld文字框

1.CLion的介绍以及其在远程开发上的优点 1&#xff09;CLion 是一个由 JetBrains 开发的跨平台 C/C 集成开发环境&#xff08;IDE&#xff09;&#xff0c;功能强大。 2&#xff09;CLion的优点&#xff1a; 远程工具链支持&#xff1a;CLion 支持通过 SSH 连接到远程 Ubuntu…

Unity--AssestBundles--热更新

使用Node.js搭建AssestBundle服务器并验证AB包热更新 一、服务器部分 使用NodeJs作为服务器&#xff0c; 使用Express为基础网页模版。 当然&#xff0c; 使用其他的FTP&#xff0c;http服务器也可以&#xff0c; 基础逻辑是存放资源的位置。 1.下载Node.js 下载地址:https…

【Python】NumPy(二):数组运算、数据统计及切片索引、广播机制

目录 Numpy数组 数组的基本运算 乘法 加法 数组的数据统计 平均值 中位数 最大值和最小值 求和 累积和 标准差 方差 切片和索引 索引 一维数组的索引 二维数组的索引 获取多个元素 布尔索引 切片 一维数组切片 二维数组切片 多维数组切片 广播机制 规则 …

本地生活便民信息服务小程序源码系统 PHP+MySQL组合开发 带完整的安装代码包以及搭建部署教程

系统概述 地方门户分类信息网站源码系统是一个基于PHP和MySQL开发的强大平台&#xff0c;旨在帮助用户轻松搭建地方性的分类信息网站。该系统集成了众多实用功能&#xff0c;支持用户自由发帖、浏览和搜索各类信息&#xff0c;如二手交易、求职招聘、房屋租售、生活服务、商家…

【java】抽象类和接口(了解,进阶,到全部掌握)

各位看官早安午安晚安呀 如果您觉得这篇文章对您有帮助的话 欢迎您一键三连&#xff0c;小编尽全力做到更好 欢迎您分享给更多人哦 大家好我们今天来学习Java面向对象的的抽象类和接口&#xff0c;我们大家庭已经来啦~ 一&#xff1a;抽象类 1.1:抽象类概念 在面向对象的概念中…

练习题(动态规划)

一&#xff0c;最长上升子序列2 题目&#xff1a; 思路分析&#xff1a; 之前的最长上升子序列的时间度是O(n^2)&#xff0c;同时集合划分是按以第 i - 1 个数是几来划分的&#xff0c;状态转移方程也很简单是 f[i] f[j] 1 &#xff0c;最后取所有一个max 那怎么优化呢&am…

ST7789读取ID错误新思路(以STC32G为例)

1.前言 前两天刚把ST7789写入搞定&#xff0c;这两天想折腾一下读取。最开始是读ID&#xff0c;先是用厂家送的程序&#xff0c;程序里面用的是模拟I8080协议&#xff0c;一切正常。后来我用STC32G的内置LCM模块&#xff0c;发现读取不出来。更神奇的是ID读不出来&#xff0c;…

【AIGC】AI如何匹配RAG知识库: Embedding实践,语义搜索

引言 RAG作为减少模型幻觉和让模型分析、回答私域相关知识最简单高效的方式&#xff0c;我们除了使用之外可以尝试了解其是如何实现的。在实现RAG的过程中Embedding是非常重要的手段。本文将带你简单地了解AI工具都是如何通过Embedding去完成语义分析匹配的。 Embedding技术简…

HTB:Headless[WriteUP]

目录 连接至HTB服务器并启动靶机 1.Which is the highest open TCP port on the target machine? 2.What is the title of the page that comes up if the site detects an attack in the contact support form? 使用浏览器访问靶机5000端口 3.What is the name of the …