vue实现拖拽窗口功能
作者：橡皮擦不掉的
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue拖拽窗口简单实现代码，供大家参考，具体内容如下
效果
实现代码
<template>
<transition>
<!-- 绑定style中top和left-->
<div class="moveBox" :style="position" v-show="show">
<div
class="moveHead"
@mousedown="mousedown"
@mousemove="mousemove"
@mouseup="mouseup"
@mouseleave="mousemove"
></div>
<!-- 关闭按钮-->
<div class="close" @click="toggleShow">×</div>
<div class="content">
<!--插槽-->
<slot></slot>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "moveBox",
data() {
return {
show: true,//是否显示
x: 100,//left:x
y: 50,//top:y
leftOffset: 0,//鼠标距离移动窗口左侧偏移量
topOffset: 0,//鼠标距离移动窗口顶部偏移量
isMove: false,//是否移动标识
};
},
computed: {
//top与left加上px
position() {
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>
<style lang="less" scoped>
.moveBox {
width: 500px;
height: 300px;
position: fixed;
box-shadow: 0 0 5px 3px #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: all 0.5s ease;
}
</style>使用
<template> <div class="home"> <button @click="$refs.moveBox.toggleShow()">toggle moveBox</button> <move-box ref="moveBox"> Hello World </move-box> </div> </template>
代码没什么难度，主要是使用了定位，在鼠标移动事件中定义top和left值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。