vue怎么实现拖拽窗口功能
导读：本文共1353.5字符，通常情况下阅读需要5分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 效果实现代码<template><transition><!--绑定style中top和left--><divclass="moveBox":v-show="show"><divclass="moveHead"@mousedown=&qu... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。效果
实现代码
<template><transition><!--绑定style中top和left--><divclass="moveBox":v-show="show"><divclass="moveHead"@mousedown="mousedown"@mousemove="mousemove"@mouseup="mouseup"@mouseleave="mousemove"></div><!--关闭按钮--><divclass="close"@click="toggleShow">×</div><divclass="content"><!--插槽--><slot></slot></div></div></transition></template><script>exportdefault{name:"moveBox",data(){return{show:true,//是否显示x:100,//left:xy:50,//top:yleftOffset:0,//鼠标距离移动窗口左侧偏移量topOffset:0,//鼠标距离移动窗口顶部偏移量isMove:false,//是否移动标识};},computed:{//top与left加上pxposition(){return`top:${this.y}px;left:${this.x}px;`;},},methods:{//控制打开关闭toggleShow(){this.x=100;this.y=50;this.show=!this.show;},mousedown(event){//鼠标按下事件this.leftOffset=event.offsetX;this.topOffset=event.offsetY;this.isMove=true;},//鼠标移动mousemove(event){if(!this.isMove){return;}this.x=event.clientX-this.leftOffset;this.y=event.clientY-this.topOffset;},//鼠标抬起mouseup(){this.isMove=false;},},};</script><stylelang="less"scoped>.moveBox{width:500px;height:300px;position:fixed;box-shadow:005px3px#95a5a6;.moveHead{height:30px;background-color:#bdc3c7;cursor:move;}.close{position:absolute;right:0;top:0;line-height:30px;font-size:24px;cursor:pointer;display:block;width:30px;height:30px;text-align:center;}}.v-enter,.v-leave-to{opacity:0;transform:scale(0.5);}.content{padding:10px;}.v-enter-active,.v-leave-active{transition:all0.5sease;}</style>使用
<template><divclass="home"><button@click="$refs.moveBox.toggleShow()">togglemoveBox</button><move-boxref="moveBox">HelloWorld</move-box></div></template>
代码没什么难度，主要是使用了定位，在鼠标移动事件中定义top和left值。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue怎么实现拖拽窗口功能的详细内容，希望对您有所帮助，信息来源于网络。