vue3 el-dialog自定义实现拖拽、限制视口范围增加了拖拽位置持久化的功能

采用element-plus的拖拽功能代码,在此基础上增加了记忆拖拽上次拖拽位置的功能,开袋即食;

前提:每次关闭弹窗都要销毁;

解决了默认设置transform的偏移量后首次拖拽弹窗偏移量错误的问题修改。
<template><el-dialogref="popupRefDialog":title="title"v-model="visibleNew":modal="modal":close-on-click-modal="false":width="width":append-to-body="false"destroy-on-close:class="`${props.class} cus-dialog`"@opened="initDrag"@close="_cancel":before-close="beforeClose"><slot></slot><template #footer v-if="footer"><div class="dialog-footer"><el-button round color="#337ECC" type="primary" :loading="loading" @click="_confirm">{{ loading ? '正在提交' : '提交' }}</el-button><el-button round class="transparent-btn" @click="_cancel">取 消</el-button></div></template></el-dialog>
</template><!-- 弹窗组件 -->
<script setup>
import cache from "@/utils/cache";
const props = defineProps({class: {type: String,default: '',},popupType: {type: String,default: 'dialog',},

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

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

相关文章

学习嵌入式之硬件——ARM体系

一、ARM内核基础知识1.ALU&#xff1a;算术逻辑单元&#xff1b;完成运算的电路2.通用寄存器&#xff1a;R0~R15R13&#xff08;SP&#xff09;&#xff1a;栈指针寄存器&#xff1a;指向栈顶的位置&#xff1b;并在函数调用、中断处理等场景中自动更新。R14&#xff08;LR&…

微信小程序中使用TensorFlowJS从环境搭建到模型训练及推理模型得到预测结果

1、小程序端环境准备app.json"plugins": {"tfjsPlugin": {"version": "0.2.0","provider": "wx6afed118d9e81df9"}}package.json"dependencies": {"tensorflow-models/posenet": "^2.2.…

深入剖析通用目标跟踪:一项综述

摘要 通用目标跟踪仍是计算机视觉领域一项重要且具有挑战性的任务,其难点在于复杂的时空动态变化,尤其在存在遮挡、相似干扰物和外观变化的情况下。过去二十年间,为应对这些挑战,研究者提出了多种跟踪范式,包括基于孪生网络的跟踪器、判别式跟踪器以及近期突出的基于Tran…

Next.js 链接与导航:页面间无缝切换

链接与导航&#xff1a;页面间无缝切换 关键要点 Next.js 提供了 <Link> 组件和程序化导航方法&#xff0c;实现页面间高效、无缝的切换。<Link> 组件利用客户端导航和预加载技术&#xff0c;优化用户体验和性能。程序化导航通过 useRouter 钩子&#xff08;Page…

根据经纬度(从nc格式环境数据文件中)提取环境因子

根据经纬度&#xff08;从nc格式环境数据文件中&#xff09;提取环境因子 文章目录前言一、准备所需文件二、代码分享总结前言 本文主要利用nc格式环境数据文件和物种经纬度分布文件&#xff0c;根据经纬度&#xff08;从nc格式环境数据文件中&#xff09;提取环境因子 一、准…

Uniapp 自定义 Tabbar 实现教程

Uniapp 自定义 Tabbar 实现教程1. 简介2. 实现步骤2.1 创建自定义 Tabbar 组件2.2 配置 pages.json3.1 路由映射3.2 样式设计3.3 图标处理4. 常见问题及解决方案4.1 页面跳转问题4.2 样式适配问题4.3 性能优化5. 扩展功能5.1 添加徽标5.2 添加动画效果6. 总结1. 简介 在 Uniap…

JuiceFS存储

因语雀与csdn markdown 格式有区别&#xff0c;请查看原文&#xff1a; https://www.yuque.com/dycloud/pss8ys 一、JuiceFS 介绍 1.1 JuiceFS 是什么 JuiceFS 是一款面向云环境设计的高性能 POSIX 文件系统&#xff0c;核心能力是将对象存储转化为全功能文件系统。它采用独…

【HarmonyOS Next之旅】DevEco Studio使用指南(三十八) -> 构建HAR

目录 1 -> 前言 2 -> 使用约束 3 -> 创建模块 4 -> 构建HAR 4.1 -> 以debug模式构建HAR 4.2 -> 以release模式构建HAR 4.3 -> 构建字节码格式的HAR 4.4 -> 对HAR进行签名 1 -> 前言 构建模式&#xff1a;DevEco Studio默认提供debug和rele…

93、【OS】【Nuttx】【构建】cmake menuconfig 目标

【声明】本博客所有内容均为个人业余时间创作&#xff0c;所述技术案例均来自公开开源项目&#xff08;如Github&#xff0c;Apache基金会&#xff09;&#xff0c;不涉及任何企业机密或未公开技术&#xff0c;如有侵权请联系删除 背景 接之前 blog 【OS】【Nuttx】【构建】cm…

React 表单处理:移动端输入场景下的卡顿问题与防抖优化方案

文章目录每日一句正能量前言一、问题场景与表现二、技术攻坚过程三、优化效果与经验沉淀每日一句正能量 山再高&#xff0c;往上攀&#xff0c;总能登顶&#xff1b;路再长&#xff0c;走下去&#xff0c;终将到达。每日一励&#xff0c;勇往直前。 前言 在移动端 React 项目开…

数据安全防护所需要的关键要素

数据安全防护是一个覆盖数据全生命周期&#xff08;采集、存储、传输、处理、销毁&#xff09;、融合技术、管理、流程与人员的系统性工程。其核心目标是保障数据的​​保密性&#xff08;Confidentiality&#xff09;、完整性&#xff08;Integrity&#xff09;、可用性&#…

【JavaEE】(8) 网络原理 HTTP/HTTPS

一、什么是 HTTP 协议 上节说到&#xff0c;应用层的协议需要约定通信的内容和数据格式。我们可以自定义应用层协议&#xff0c;也可以基于现成的应用层协议进行开发。协议的种类很多&#xff0c;最常见的之一就是 HTTP&#xff0c;广泛用于网站和手机 App。准确来说&#xff0…

C语言的数组与字符串练习题4

C语言的数组与字符串练习题4 16. 数组元素去重 题目描述: 编写一个C程序,输入一组整数存储在数组中,去除数组中的重复元素,并输出去重后的数组。 解题思路: 遍历数组,对于每个元素,检查它之前是否已经存在相同的元素。如果不存在,则将其保留;否则,跳过。可以使用一…

Transformers简单介绍 - 来源于huggingface

Transformers介绍 - 来源于huggingface 文章目录Transformers介绍 - 来源于huggingfaceTransformers能做什么pipeline()函数零样本分类推理API完形填空命名实体识别问答摘要提取翻译transformers是如何工作的transformers的具体组成注意力层机制transformers原始结构architectu…

template<typename R = void> 意义

在 C 中&#xff0c;template<typename R void> 表示定义一个模板参数 R&#xff0c;其默认类型为 void。这意味着&#xff1a;如果用户没有显式指定 R&#xff0c;则 R 默认为 void。如果用户显式指定了 R&#xff08;如 template<typename R void> 后面跟着 &l…

国产3D大型装配设计新突破①:图纸打开设计双加速 | 中望3D 2026

本文为CAD芯智库整理&#xff0c;未经允许请勿复制、转载&#xff01;在中望3D 2026的新版中&#xff0c;不仅在设计效率上进行了重大优化&#xff0c;更是在装配方面实现了突破性的改进&#xff0c;让每一个项目都能快速、精确地从概念变为现实。 中望3D2026亮点速递装配篇将…

游戏开发状态机与行为树的优缺点

在游戏开发中&#xff0c;状态机&#xff08;Finite State Machine, FSM&#xff09; 和行为树&#xff08;Behavior Tree, BT&#xff09; 是两种常用的 AI 逻辑控制框架&#xff0c;分别适用于不同场景&#xff0c;其优缺点对比可从灵活性、维护成本、适用场景等多个维度分析…

Linux下ELF文件的介绍

目录 1.温故知新 2.ELF文件介绍 3.ELF文件组成 4.ELF文件形成到加载 5.连接过程 1.温故知新 上一篇博客&#xff0c;我们介绍了我们的动静态&#xff0c;知道了我们的库其实也是文件&#xff0c;如果我们想写一个库也是可以的&#xff0c;我们的把我们的库文件编译成.o文件…

人工智能领域、图欧科技、IMYAI智能助手2025年6月更新月报

2025年6月AI领域重要模型更新与平台优化汇总 摘要&#xff1a; 本文汇总了2025年6月期间AI领域发布的多项重要模型更新及平台功能优化信息&#xff0c;涵盖Google Gemini、阿里通义万相、字节豆包、百度文心一言、MiniMax海螺02、Google Veo3、快手可灵2.1、FLUX Kontext等模型…

从零开始学Express,理解服务器,路由于中间件

当我们初学前端时&#xff0c;常常只关注页面效果和交互&#xff0c;但随着项目复杂度提升&#xff0c;我们迟早会遇到“服务端”的问题&#xff1a;如何让一个页面的数据是从数据库来的&#xff1f;怎么让不同的用户看到不同的内容&#xff1f;这时候&#xff0c;我们就需要一…