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
英文地址,請注明出處:http://en.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;我們就需要一…