当前位置: 首页 > news >正文

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.dtcms.com/a/317841.html

相关文章:

  • 实战教程:从“对象文件为空“到仓库重生——修复 Git 仓库损坏全记录
  • 大数据存储域——Hive数据仓库工具
  • STM32 APP跳转后无法进入中断
  • QT----不同线程中信号发送了槽函数没反应QObject::connect: Cannot queue arguments of typeXXX
  • C++编程语言:标准库:工具类(Bjarne Stroustrup)
  • Python赋能气象与气候数据分析的生态构建与实战路径
  • Linux中systemd与systemctl管理指南
  • LlaMA_Factory实战微调VL大模型
  • 【数据分享】西藏土壤类型数据库
  • AlphaEarth模型架构梳理及借鉴哪些深度学习领域方面的思想
  • [AI 生成] Spark 面试题
  • 【深度学习】Graph Transformer Networks(GTN,图变换网络)
  • Linux 中 Git 操作大全
  • 测试单节点elasticsearch配置存储压缩后的比率
  • cacti
  • 深入理解C++中的stack、queue和priority_queue
  • 部署 Zabbix 企业级分布式监控笔记
  • C语言高级编程技巧与最佳实践
  • 学习bug
  • R4周打卡——Pytorch实现 LSTM火灾预测
  • 人工智能——深度学习——认识Tensor
  • 工业禁区人员闯入识别准确率↑29%:陌讯动态融合算法实战解析
  • 如何解决pip安装报错ModuleNotFoundError: No module named ‘gensim’问题
  • 股票T0程序化交易,高频交易
  • 队列很多时,为什么RocketMQ比Kafka性能好?
  • 河南萌新联赛2025第四场-河南大学
  • 【PZSDR P201MINI】 P201Mini 软件无线电开发板:紧凑型射频系统的性能标杆
  • OpenSCA用户访谈第二期:互联网科技公司如何用OpenSCA“锁”住开源风险?
  • 模块--继电器
  • 进阶向:Python开发简易QQ聊天机器人