|
@@ -9,7 +9,7 @@
|
|
@mousedown.stop.prevent="moveStart"
|
|
@mousedown.stop.prevent="moveStart"
|
|
@mouseover.stop.prevent="showButton"
|
|
@mouseover.stop.prevent="showButton"
|
|
@mouseleave.stop.prevent="hideButton"
|
|
@mouseleave.stop.prevent="hideButton"
|
|
- @click.stop.prevent="toggleMenu"
|
|
+ @click.stop.prevent="showComment"
|
|
>
|
|
>
|
|
<div class="btn-content">
|
|
<div class="btn-content">
|
|
<svg-icon icon-class="liaotian" style="width:20px;height:18px;margin-bottom:5px;" />
|
|
<svg-icon icon-class="liaotian" style="width:20px;height:18px;margin-bottom:5px;" />
|
|
@@ -39,7 +39,6 @@ export default {
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
window.addEventListener('resize', () => {
|
|
- // console.log('resize')
|
|
|
|
const initHeight = document.body.offsetHeight / 2 - 43
|
|
const initHeight = document.body.offsetHeight / 2 - 43
|
|
let top = initHeight
|
|
let top = initHeight
|
|
if (initHeight < variables.headerHeight) {
|
|
if (initHeight < variables.headerHeight) {
|
|
@@ -50,38 +49,30 @@ export default {
|
|
})
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- closeMenuAndFloating() {
|
|
+ async showComment() {
|
|
- // console.log('closeMenuAndFloating')
|
|
+ console.log(`clickkk: lastMoveIndex(${this.lastMoveIndex}) curMoveIndex(${this.curMoveIndex})`)
|
|
- this.hoverFlag = false
|
|
|
|
- this.moveFlags = false
|
|
|
|
- this.resetFloatBtnLocation()
|
|
|
|
- },
|
|
|
|
- async toggleMenu() {
|
|
|
|
- // console.log('clickkk')
|
|
|
|
// 如果上一次down事件到下一次click事件中 相同即为点击事件
|
|
// 如果上一次down事件到下一次click事件中 相同即为点击事件
|
|
if (this.lastMoveIndex === this.curMoveIndex) {
|
|
if (this.lastMoveIndex === this.curMoveIndex) {
|
|
- // console.log(this.lastMoveIndex - this.curMoveIndex)
|
|
|
|
- // console.warn('点击')
|
|
|
|
this.$emit('addComment')
|
|
this.$emit('addComment')
|
|
}
|
|
}
|
|
this.curMoveIndex = this.lastMoveIndex
|
|
this.curMoveIndex = this.lastMoveIndex
|
|
},
|
|
},
|
|
showButton() {
|
|
showButton() {
|
|
- // console.log('mouse-over')
|
|
+ console.log('mouse-over')
|
|
if (this.moveFlags) return (this.hoverFlag = false)
|
|
if (this.moveFlags) return (this.hoverFlag = false)
|
|
this.hoverFlag = true
|
|
this.hoverFlag = true
|
|
const { top } = this.transform
|
|
const { top } = this.transform
|
|
this.generateTransform({ top: top, right: 0 })
|
|
this.generateTransform({ top: top, right: 0 })
|
|
},
|
|
},
|
|
hideButton() {
|
|
hideButton() {
|
|
- // console.log('mouse-leave')
|
|
+ console.log('mouse-leave')
|
|
this.hoverFlag = false
|
|
this.hoverFlag = false
|
|
// 移动过程中不复位 按钮;
|
|
// 移动过程中不复位 按钮;
|
|
if (this.moveFlags) return
|
|
if (this.moveFlags) return
|
|
this.resetFloatBtnLocation()
|
|
this.resetFloatBtnLocation()
|
|
},
|
|
},
|
|
moveStart(e) {
|
|
moveStart(e) {
|
|
- // console.log('moveStart')
|
|
+ console.log('moveStart')
|
|
if (e.button === 2) return
|
|
if (e.button === 2) return
|
|
|
|
|
|
// 计算鼠标相对元素的位置
|
|
// 计算鼠标相对元素的位置
|
|
@@ -91,7 +82,7 @@ export default {
|
|
this.moveFlags = true
|
|
this.moveFlags = true
|
|
document.onmousemove = async(e) => {
|
|
document.onmousemove = async(e) => {
|
|
this.moveFlags = true
|
|
this.moveFlags = true
|
|
- // console.log('onmousemove')
|
|
+ console.log('onmousemove')
|
|
const bodyHeight = document.body.clientHeight
|
|
const bodyHeight = document.body.clientHeight
|
|
const moveMaxHeight = bodyHeight - 86
|
|
const moveMaxHeight = bodyHeight - 86
|
|
const moveMinHeight = variables.headerHeight
|
|
const moveMinHeight = variables.headerHeight
|
|
@@ -107,20 +98,21 @@ export default {
|
|
this.generateTransform({ top: moveTop, right })
|
|
this.generateTransform({ top: moveTop, right })
|
|
}
|
|
}
|
|
document.onmouseup = () => {
|
|
document.onmouseup = () => {
|
|
|
|
+ console.log('onmouseup')
|
|
document.onmousemove = null
|
|
document.onmousemove = null
|
|
document.onmouseup = null
|
|
document.onmouseup = null
|
|
this.moveEnd()
|
|
this.moveEnd()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
moveEnd() {
|
|
moveEnd() {
|
|
- // console.log(`moveEnd`)
|
|
+ console.log(`moveEnd`)
|
|
this.moveFlags = false
|
|
this.moveFlags = false
|
|
if (this.hoverFlag) return
|
|
if (this.hoverFlag) return
|
|
document.onmousemove = null
|
|
document.onmousemove = null
|
|
this.resetFloatBtnLocation()
|
|
this.resetFloatBtnLocation()
|
|
},
|
|
},
|
|
resetFloatBtnLocation() {
|
|
resetFloatBtnLocation() {
|
|
- // console.log('------reset')
|
|
+ console.log('------reset')
|
|
const floatBtn = this.$refs.floatBtn // 获取目标元素
|
|
const floatBtn = this.$refs.floatBtn // 获取目标元素
|
|
if (!floatBtn) return
|
|
if (!floatBtn) return
|
|
const { top } = this.transform
|
|
const { top } = this.transform
|