一个简单的可拖拽的弹窗样式HTML通过给可拖拽区域绑定mousedownstartDragvue的事件来实现元素的拖动功能。CSS通过background: linear-gradient(180deg, color 0%, color 100%)实现背景渐变色宽度通过width: fit-content实现自适应宽同时设置min-width和max-width确保比例不会太离谱。JS通过使用startDrag、onDrag、stopDrag等事件来控制拖动行为。源码divv-ifshowCardrefcardclasscard_infodivclasscard_headermousedownstartDrag/divdivclassclose_infoclickshowCard false×/divspan≡nbsp;nbsp;标题/spanp字段一nbsp;nbsp;{{ metarilInfo.mapCode }}/pp字段二nbsp;nbsp;{{ metarilInfo.areaCode }}/pp字段三nbsp;nbsp;{{ metarilInfo.mapDataCode }}/pp字段四nbsp;nbsp;{{ metarilInfo.coox }}, {{ metarilInfo.cooy }}/pp字段五nbsp;nbsp;{{ metarilInfo.shelfCode }}/pp字段六nbsp;nbsp;{{ metarilInfo.mapDataEmptyDate || / }}/p/divscriptlangtssetupimport{ref}fromvue;constshowCardref(false);//何时显示的代码自己定义constcardrefany(null);constisDraggingref(false);letstartX0;letstartY0;conststartDrag(event){//开始拖拽事件if(!card.value)returnisDragging.valuetrue;startXevent.clientX-card.value.offsetLeft;startYevent.clientY-card.value.offsetTop;document.addEventListener(mousemove,onDrag);document.addEventListener(mouseup,stopDrag);document.addEventListener(mouseleave,stopDrag);};constonDrag(event){//拖拽中事件if(!isDragging.value)returnevent.preventDefault();//阻止浏览器默认行为card.value.style.left${event.clientX-startX}px;card.value.style.top${event.clientY-startY}px;};conststopDrag(){//停止拖拽时销毁监听器isDragging.valuefalse;document.removeEventListener(mousemove,onDrag);document.removeEventListener(mouseup,stopDrag);document.removeEventListener(mouseleave,stopDrag);};/scriptstylelangscssscoped.card_info{position:absolute;top:20%;left:50%;transform:translateX(-50%);min-width:12vw;max-width:fit-content;pointer-events:all;background:linear-gradient(180deg,#236784f1 0%,#236784d2 20%,#2367848a 100%);padding:0.1vw 0.5vw 0.5vw 0.5vw;border:1px solid #44dbee;border-radius:0.25vw;::before{content:;position:absolute;top:0.7vw;left:0;height:1vw;width:0.2vw;background-color:#44dbee;}.card_header{position:absolute;top:0.3vw;left:0.3vw;height:1.5vw;width:90%;cursor:grab;//可拖拽样式z-index:1;:active{cursor:grabbing;//鼠标点击后变为拖拽中样式}}.close_info{font-size:2vh;width:1vw;height:1vw;color:#fff;display:flex;justify-content:center;align-items:center;position:absolute;top:0.1vw;right:0.1vw;:hover{cursor:pointer;background-color:red;}}span{font-size:1vw;font-weight:600;height:1.9vw;line-height:1.9vw;padding:0 1vw 0 0;z-index:2;}p{font-size:0.7vw;height:1.4vw;line-height:1.4vw;background-color:#00000050;margin-top:0.1vw;padding:0 0.3vw;white-space:nowrap;}}/style效果图