企业官网建设流程全解析

一个简单的可拖拽的弹窗样式

• HTML：通过给可拖拽区域绑定@mousedown="startDrag"vue的事件来实现元素的拖动功能。
• CSS：通过background: linear-gradient(180deg, color 0%, color 100%)实现背景渐变色，宽度通过width: fit-content实现自适应宽，同时设置min-width和max-width确保比例不会太离谱。
• JS：通过使用startDrag、onDrag、stopDrag等事件来控制拖动行为。

源码

<divv-if="showCard"ref="card"class="card_info"><divclass="card_header"@mousedown="startDrag"></div><divclass="close_info"@click="showCard = false">×</div><span>≡&nbsp;&nbsp;标题</span><p>字段一：&nbsp;&nbsp;{{ metarilInfo.mapCode }}</p><p>字段二：&nbsp;&nbsp;{{ metarilInfo.areaCode }}</p><p>字段三：&nbsp;&nbsp;{{ metarilInfo.mapDataCode }}</p><p>字段四：&nbsp;&nbsp;{{ metarilInfo.coox }}, {{ metarilInfo.cooy }}</p><p>字段五：&nbsp;&nbsp;{{ metarilInfo.shelfCode }}</p><p>字段六：&nbsp;&nbsp;{{ metarilInfo.mapDataEmptyDate || '/' }}</p></div><scriptlang="ts"setup>import{ref}from'vue';constshowCard=ref(false);//何时显示的代码自己定义constcard=ref<any>(null);constisDragging=ref(false);letstartX=0;letstartY=0;conststartDrag=(event)=>{//开始拖拽事件if(!card.value)returnisDragging.value=true;startX=event.clientX-card.value.offsetLeft;startY=event.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.value=false;document.removeEventListener('mousemove',onDrag);document.removeEventListener('mouseup',stopDrag);document.removeEventListener('mouseleave',stopDrag);};</script><stylelang="scss"scoped>.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>

效果图