可拖拽的窗口（Vue）

项目中需要实现一个可拖拽窗口的效果，这里使用插槽的方式实现效果

<template><transition class="move_root"><!--    绑定style中top和left--><div class="moveBox" :style="position" v-show="show"><div class="moveHead" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" @mouseleave="mousemove">{{ title }}</div><!--      关闭按钮--><div class="close" @click="toggleShow()">×</div><div class="content"><!--插槽--><slot></slot></div></div></transition>
</template>

逻辑代码

<script>
export default {name: 'moveBox',props: ['title'],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(data) {this.x = 100this.y = 50this.show = !this.show},mousedown(event) {//鼠标按下事件this.leftOffset = event.offsetXthis.topOffset = event.offsetYthis.isMove = true},//鼠标移动mousemove(event) {if (!this.isMove) {return}this.x = event.clientX - this.leftOffsetthis.y = event.clientY - this.topOffset},//鼠标抬起mouseup() {this.isMove = false},},
}
</script>

css样式

<style lang="less" scoped>
.moveBox {width: 500px;// height: 300px;position: fixed;z-index: 99998;background: rgb(255, 255, 255);box-shadow: 0 0 5px 3px #95a5a6;.moveHead {height: 35px;background-color: #e63e31;cursor: move;color: #fff;padding: 9px 0 0 11px;}.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>

可拖拽的窗口（Vue）相关推荐

FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
vue下轻松解决模拟微信视频缩略图拖拽→吸附窗口边界的功能
<script> export default {data() {return {drag: {draggedSel: ".girl", //被拖动元素的class或i ...
html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；
vue项目:点击拖拽盒子:移动盒子: 代码可直接复制:(注意需要在移动的盒子上添加 v-指令注意采用固定定位) <template><div class="far_box ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
jQuery 鼠标拖拽移动窗口
拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果&q ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
vue拖拽盒子；vue移动
这里写目录标题通过directives指令实现vue实现盒子的移动 vue-draggable-resizable定制化可拖动控件通过directives指令实现vue实现盒子的移动 <di ...
vue可视化拖拽组件模板,vue组件拖拽自定义界面
前端可视化开发平台哪个好用? ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备. ThingJS 为可视化应用提供了简单.丰富的功能 ...
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

可拖拽的窗口（Vue）

可拖拽的窗口（Vue）相关推荐

最新文章

热门文章