/*
|
* @Author: Morpheus
|
* @Name: 工具小的封装
|
* @Date: 2021-11-13 16:04:27
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2022-02-15 10:45:07
|
*/
|
|
<template>
|
<div ref="tooSmallBox">
|
<div class="header" @mousedown="move" :class="{ move: moveFlag }">
|
<slot name="tool-small-box-header"></slot>
|
</div>
|
<div class="content">
|
<slot name="tool-small-box-content"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'ToolSmallBox',
|
data () {
|
return {
|
moveFlag: false
|
}
|
},
|
computed: {
|
|
},
|
created () { },
|
methods: {
|
move (e) {
|
const that = this
|
const odiv = this.$refs.tooSmallBox // 获取目标元素
|
// 算出鼠标相对元素的位置
|
const disX = e.clientX - odiv.offsetLeft
|
const disY = e.clientY - odiv.offsetTop
|
|
const disH = odiv.offsetHeight
|
const disW = odiv.offsetWidth
|
|
document.onmousemove = (e) => {
|
that.moveFlag = true
|
// 鼠标按下并移动的事件
|
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
|
let left = e.clientX - disX
|
let top = e.clientY - disY
|
|
// 绑定元素位置到positionX和positionY上面
|
|
if (left >= window.innerWidth - disW) {
|
left = window.innerWidth - disW
|
}
|
|
if (left <= 0) {
|
left = 0
|
}
|
|
if (top >= window.innerHeight - disH) {
|
top = window.innerHeight - disH
|
}
|
|
if (top <= 60) {
|
top = 60
|
}
|
|
// 移动当前元素
|
odiv.style.left = (left) + 'px'
|
odiv.style.top = (top) + 'px'
|
odiv.style.bottom = 'auto'
|
}
|
document.onmouseup = (e) => {
|
that.moveFlag = false
|
document.onmousemove = null
|
document.onmouseup = null
|
}
|
}
|
},
|
destroyed () { }
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.move {
|
cursor: move;
|
}
|
</style>
|
