当前位置: 首页 > 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.xdnf.cn/news/1253197.html

相关文章:

  • DNS 服务器
  • 【golang】基于redis zset实现并行流量控制(计数锁)
  • 部署Web UI自动化测试平台:SeleniumFlaskTester
  • Maven入门到精通
  • Rust进阶-part5-trait
  • 机器学习——朴素贝叶斯
  • 19day-人工智能-机器学习-分类算法-决策树
  • NCD57080CDR2G 安森美onsemi 通用驱动器, SOIC, 8针, 20V电源, 8 A输出NCD57080CDR2电流隔离式栅极驱动器
  • 大模型后训练——Online-RL基础
  • 【嵌入式电机控制#26】BLDC:三相模拟采集
  • 江协科技STM32 15-1 FLASH闪存
  • LinkedList 深度解析:核心原理与实践
  • Docker 常用命令介绍
  • Linux 中 Git 操作大全
  • Web 端 AI 图像生成技术的应用与创新:虚拟背景与创意图像合成
  • 初识神经网络01——认识PyTorch
  • docker-compose快速部署启动file beat+ELK
  • WMS及UI渲染底层原理学习
  • 完整的登陆学生管理系统(配置数据库)
  • 数字图像处理(冈萨雷斯)第三版:第四章——空间滤波与频域滤波(平滑与锐化)——主要内容和重点
  • 无人机航拍数据集|第6期 无人机垃圾目标检测YOLO数据集772张yolov11/yolov8/yolov5可训练
  • 当前主流GPU全景讲解:架构、功能与应用方向
  • 【模电笔记】—— 直流稳压电源——稳压电路
  • OpenCV校准双目相机并测量距离
  • linux下的串口通信原理及编程实例
  • Pytest项目_day04(Python做接口请求)
  • 笔记html模板
  • 大语言模型
  • Python Pandas.lreshape函数解析与实战教程
  • CPP网络编程-异步sever