目录
问题
拖动该悬浮球时,鼠标弹起可能会触发悬浮球内事件
解决思路
- 鼠标拖动盒子时,将
isMove
设为true
意为正在拖动盒子,此时将class="btns_move"
遮挡容器展示在悬浮球上层,以覆盖悬浮球,此时也就不存在触发悬浮球点击事件的冲突了;鼠标拖动完盒子弹起时再将isMove
设为false
意为不在拖动盒子(遮挡容器class="btns_move"
不存在),可以触发悬浮球点击事件- 【注解】
click
点击事件主要是在鼠标弹起时触发 ,class="btns_move"
容器展示时,鼠标已不再悬浮器上点击 ,所以也就不存在鼠标在悬浮球上弹起的说法,因此可解决拖动盒子时与悬浮球点击事件冲突的问题
解决代码(标注【主要代码】的为重点)
index.vue
html
<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
css
.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
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'
}
}
}
解决效果