vue弹窗可拖动,vue实现拖拽可视化
这篇文章主要为大家详细介绍了某视频剪辑软件实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件拖拽窗口简单实现代码，供大家参考，具体内容如下
效果
实现代码
模板
过渡
！-绑定风格中顶端和左边
div class= moveBox :style= position v-show= show
差异
class=moveHead
@mousedown=mousedown
@mousemove=mousemove
@mouseup=mouseup
@mouseleave=mousemove
/div
！-关闭按钮-
div class= close @ click=切换显示/div
div class=内容
！-插槽-
插槽/插槽
/div
/div
/过渡
/模板
脚本
导出默认值{
名称：移动盒子，
data() {
返回{
show: true，//是否显示
x: 100，//left:x
y: 50，//top:y
左偏移量：0,//鼠标距离移动窗口左侧偏移量
拓扑偏移量：0,//鼠标距离移动窗口顶部偏移量
isMove: false，//是否移动标识
};
},
计算值：{
//顶部与左边的加上像素
位置(){
return ` top:$ { this。y } px左：$ { this.x } px
},
},
方法：{
//控制打开关闭
toggleShow() {
this.x=100
this.y=50
this.show=！这个. show
},
鼠标按下（事件){
//鼠标按下事件
这个。左偏移=事件。offsetx
这个。顶部偏移=事件。小康；
this.isMove=true
},
//鼠标移动
鼠标移动(事件){
如果(!this.isMove) {
返回；
}
这个。x=事件。clientx-这个。左偏移；
这个。y=事件。客户-这个。抵消；
},
//鼠标抬起
mouseup() {
this.isMove=false
},
},
};
/脚本
style lang=less 范围。moveBox {
宽度：500像素
高度：300像素
位置：固定；
盒影：0 0 5px 3px # 95a5a 6；移动头{
高度：30px
背景色：# bdc3c7
光标：移动；
}。关闭{
位置：绝对；
右：0;
top:0；
行高：30px
字体大小：24px
光标：指针；
显示：块；
宽度：30px
高度：30px
文本对齐：居中；
}
}。回车，五-离开到{
不透明度：0;
变换：缩放(0.5);
}。内容{
填充：10px
}。v-enter-active。五-离开-活动{
过渡：全0.5s轻松；
}
/风格
使用
模板
div class=home
button @ click= $ refs。移动盒子。切换显示()切换移动框/按钮
移动框引用=移动框
你好世界
/移动框
/div
/模板
代码没什么难度，主要是使用了定位，在鼠标移动事件中定义顶端和左边的值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。