封装可拖动弹窗(vue jquery引入到html的版本)

vue cli上简单的功能，在js上太难弄了，这个弹窗功能时常用到，生存起来备用吧
备注：deepseek这个人工智障写一堆有题目的我，还老服务器繁忙
  结果图：

html代码：

1. <div class="modal-mask" v-show="qrcodeShow" @click.self="closeModal">
2.   <div class="modal-container" ref="modal" :style="modalStyle">
3.     <div
4.       class="modal-header"
5.       @mousedown="startDrag"
6.       @touchstart.prevent="startDrag"
7.       @mouseup="stopDrag"
8.       @touchend="stopDrag"
9.     >
10.       <span>获取app</span>
11.       <span class="close-btn" @click="closeModal">&times;</span>
12.     </div>
13.     <div class="image-container">
14.       <img :src="qrcodeImgUrl" class="modal-image" alt="弹窗图片" />
15.     </div>
16.   </div>
17. </div>

复制代码

js代码：

1. data: {
2.         scanCodeList: [],
3.     qrcodeShow: false,
4.     qrcodeImgUrl: "**图片地址**",
5.     isDragging: false,
6.     startX: 0,
7.     startY: 0,
8.     translateX: 0,
9.     translateY: 0,
10.     modalRect: null,
11. },
12.   created() {
13.     this.$nextTick(() => {
14.       // 使用jQuery添加动画效果
15.       $(".modal-container").hide();
16.       // 监听弹窗状态变化
17.       this.$watch("qrcodeShow", (newVal) => {
18.         if (newVal) {
19.           $(".modal-container").fadeIn(300);
20.         } else {
21.           $(".modal-container").fadeOut(300);
22.         }
23.       });
24.     });
25.   },
26.   computed: {
27.     modalStyle() {
28.       return {
29.         transform: `translate(${this.translateX}px, ${this.translateY}px)`,
30.       };
31.     },
32.   },
33.   methods: {
34.     showModal() {
35.       this.qrcodeShow = true;
36.     },
37.     closeModal() {
38.       this.qrcodeShow = false;
39.     },
40.     // 开始拖动
41.     startDrag(e) {
42.       this.isDragging = true;
43.       const clientX = e.touches ? e.touches[0].clientX : e.clientX;
44.       const clientY = e.touches ? e.touches[0].clientY : e.clientY;
46.       // 记录初始位置
47.       this.startX = clientX - this.translateX;
48.       this.startY = clientY - this.translateY;
50.       // 获取弹窗尺寸
51.       this.modalRect = this.$refs.modal.getBoundingClientRect();
53.       // 添加事件监听
54.       document.addEventListener("mousemove", this.onDrag);
55.       document.addEventListener("touchmove", this.onDrag, { passive: false });
56.       document.addEventListener("mouseup", this.stopDrag);
57.       document.addEventListener("touchend", this.stopDrag);
59.       // 优化拖动体验
60.       document.body.style.cursor = "grabbing";
61.       document.body.style.userSelect = "none";
62.     },
64.     // 拖动处理
65.     onDrag(e) {
66.       if (!this.isDragging) return;
68.       // 获取坐标
69.       const clientX = e.touches ? e.touches[0].clientX : e.clientX;
70.       const clientY = e.touches ? e.touches[0].clientY : e.clientY;
72.       // 计算新位置
73.       let newX = clientX - this.startX;
74.       let newY = clientY - this.startY;
76.       // 计算边界
77.       const viewportWidth = document.documentElement.clientWidth;
78.       const viewportHeight = document.documentElement.clientHeight;
79.       const modalWidth = this.modalRect.width;
80.       const modalHeight = this.modalRect.height;
82.       // 有效边界
83.       const minX = -(viewportWidth - modalWidth) / 2;
84.       const minY = -(viewportHeight - modalHeight) / 2;
85.       const maxX = (viewportWidth - modalWidth) / 2;
86.       const maxY = (viewportHeight - modalHeight) / 2;
88.       // 应用约束
89.       newX = Math.max(minX, Math.min(newX, maxX));
90.       newY = Math.max(minY, Math.min(newY, maxY));
92.       // 更新位置
93.       this.translateX = newX;
94.       this.translateY = newY;
95.     },
97.     // 停止拖动
98.     stopDrag() {
99.       this.isDragging = false;
101.       // 移除事件监听
102.       document.removeEventListener("mousemove", this.onDrag);
103.       document.removeEventListener("touchmove", this.onDrag);
104.       document.removeEventListener("mouseup", this.stopDrag);
105.       document.removeEventListener("touchend", this.stopDrag);
107.       // 恢复样式
108.       document.body.style.cursor = "";
109.       document.body.style.userSelect = "";
110.     },
112.     // 重置位置到屏幕中央
113.     resetPosition() {
114.       this.$nextTick(() => {
115.         const modal = this.$refs.modal;
116.         if (modal) {
117.           const rect = modal.getBoundingClientRect();
118.           const viewportWidth = document.documentElement.clientWidth;
119.           const viewportHeight = document.documentElement.clientHeight;
121.           this.translateX = (viewportWidth - rect.width) / 2;
122.           this.translateY = (viewportHeight - rect.height) / 2;
123.         }
124.       });
125.     },
126.   },

复制代码

css代码：

1. /* 遮罩层样式 */
2.   .modal-mask {
3.     position: fixed;
4.     top: 0;
5.     left: 0;
6.     width: 100%;
7.     height: 100%;
8.     background: rgba(0, 0, 0, 0.5);
9.     z-index: 9998;
10.     display: flex;
11.     justify-content: center;
12.     align-items: center;
14.     /* 弹窗容器 */
15.     .modal-container {
16.       display: none;
17.       background: white;
18.       border-radius: 8px;
19.       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
20.       width: 500px;
21.       height: 500px;
22.       z-index: 9999;
23.       position: relative;
25.       /* 弹窗头部 */
26.       .modal-header {
27.         height: 50px;
28.         padding: 15px;
29.         border-bottom: 1px solid #eee;
30.         display: flex;
31.         justify-content: space-between;
32.         align-items: center;
33.         cursor: move;
34.         user-select: none; /* 防止文字被选中 */
35.         span {
36.           font-size: 18px;
37.           font-weight: bold;
38.         }
39.         /* 关闭按钮样式 */
40.         .close-btn {
41.           cursor: pointer;
42.           font-size: 20px;
43.           color: #666;
44.           padding: 0 5px;
45.         }
46.       }
48.       /* 图片容器 */
49.       .image-container {
50.         padding: 20px;
51.         width: 100%;
52.         height: calc(100% - 50px);
53.         overflow: auto;
54.         img {
55.           width: 100%;
56.           height: 100%;
57.           object-fit: cover;
58.         }
59.       }
60.     }
61.   }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。