Table of contents
question
When dragging the floating ball, the mouse bounce may trigger events in the floating ball.
Solutions
- When the mouse drags the box,
isMoveset totruemeans that the box is being dragged. At this time,class="btns_move"the occlusion container is displayed on the upper layer of the floating ball to cover the floating ball. At this time, there is no conflict that triggers the floating ball click event; the mouse drags After the box pops up,isMovesetfalseto means that the box is no longer being dragged (the blocking containerclass="btns_move"does not exist), and the floating ball click event can be triggered.- [Note]
clickThe click event is mainly triggered when the mouse bounces up .class="btns_move"When the container is displayed, the mouse is no longer clicked on the hover ball , so there is no such thing as the mouse bouncing on the hover ball. Therefore, it can solve the problem when dragging the box. The problem of conflict between floating ball click events
Solution code (emphasis on the one marked [main code])
index.vue
<div ref="btns" class="btns" @mousedown="mousedownHandler">
<div class="btns_other_police" @click="$refs.SearchDialogRef.open('police')">
<img :src="require(`@/assets/portrait/iconfont/${theme}_police.png`)" />
<span>其他警员</span>
</div>
<div class="btns_fullscreen_show" @click="handleScreenFull">
<img :src="require(`@/assets/portrait/iconfont/${theme}_expand.png`)" />
<span> {
{ isFullscreen ? '退出全屏' : '全屏显示' }} </span>
</div>
<!-- <div v-show="isMove" class="btns_move">我是避免拖动盒子与盒子内事件冲突的元素</div> -->
<div v-show="isMove" class="btns_move" /> <!-- 【主要代码】 -->
</div>
index.scss
.btns {
$btnWiddth: 70px;
position: absolute;
bottom: 10px;
right: 10px;
// z-index: 9999;
z-index: 2000;
width: $btnWiddth;
height: 147px;
cursor: move;
opacity: 0.8;
&_other_police,
&_fullscreen_show {
width: $btnWiddth;
height: $btnWiddth;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: red;
border-radius: 50px;
font-size: 12px;
cursor: pointer;
img {
width: 25px;
height: 25px;
margin-bottom: 5px;
}
}
&_other_police {
margin-bottom: 7px;
}
&_move {
width: 100%;
height: 100%;
// background-color: red;
position: absolute; /* 【主要代码】 */
top: 0;
// z-index: -10;
}
}
mixins/index.js
import {
mapGetters } from 'vuex'
import screenfull from 'screenfull'
import portraitMock from '../../../../public/static/portraitMock.json'
export const PortraitMixin = {
data() {
return {
lightEchartsNoDataColor: '#000',
blueEchartsNoDataColor: '#fff',
timeFormat: 'yyyy/MM/dd',
timeValueFormat: 'yyyy-MM-dd',
portraitMock,
initBtnX: 0,
initBtnY: 0,
isMove: false // 【主要代码】
}
},
computed: {
...mapGetters(['isFullscreen'])
},
mounted() {
const _this = this
window.addEventListener(
'resize',
() => {
// 全屏下监控是否按键了ESC
if (_this.checkFull()) {
// 全屏下按键esc后要执行的动作
screenfull.exit()
_this.$store.commit('SET_isFullscreen', false)
}
},
false
)
document.addEventListener('mouseup', () => {
this.isMove = false // 【主要代码】
document.removeEventListener('mousemove', this.mousemoveHandler)
})
},
filters: {
noDataFilter(val) {
return val || val === 0 ? val : '-'
},
numFilter(val) {
return val || val === 0 ? Number(val).toLocaleString() : '-'
},
bmQlfFilter(val, color, key) {
const data = val.filter((item) => item.policeColorCode.includes(color))
return data.length ? (data[0][key] || data[0][key] === 0 ? data[0][key] : '-') : '-'
}
},
methods: {
// 全屏显示
handleScreenFull() {
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
if (this.isFullscreen) {
screenfull.exit()
this.$store.commit('SET_isFullscreen', false)
this.$store.commit('SET_isShowHeader', true)
} else {
screenfull.request()
this.$store.commit('SET_isFullscreen', true)
this.$store.commit('SET_isShowHeader', false)
}
},
/**
* 是否全屏并按键ESC键的方法
*/
checkFull() {
const isFullscreen =
window.fullScreen ||
window.isFullscreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled
let isFull = document.fullscreenEnabled && !isFullscreen
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false
}
return isFull
},
toDetailHandler(type) {
// 该方法和此处无关
if (type === 'zffx') {
this.$router.push({
path: '/warning-manage-common/warning-query',
query: {
date: JSON.stringify({
kssj: this.zffxSearchTime[0],
jssj: this.zffxSearchTime[1]
}),
...(this.searchXm ? {
zrr: this.searchXm } : {
}),
...(this.searchBm ? {
ssbm: this.searchBm } : {
})
}
})
}
},
mousedownHandler($event) {
this.initBtnX = $event.pageX - this.$refs.btns.offsetLeft
this.initBtnY = $event.pageY - this.$refs.btns.offsetTop
document.addEventListener('mousemove', this.mousemoveHandler)
},
mousemoveHandler($event) {
this.isMove = true // 【主要代码】
this.$refs.btns.style.left = $event.pageX - this.initBtnX + 'px'
this.$refs.btns.style.top = $event.pageY - this.initBtnY + 'px'
}
}
}
解决效果
