<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-09 10:36:05
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-27 19:54:44
|
* @FilePath: \srs-police-affairs\src\components\map\components\yToolTip.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div ref="toolTopBox" v-show="tooltipShow">
|
<div class="tool-text">
|
{{ handlerText }}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
handlerText: '',
|
tooltipShow: false
|
}
|
},
|
|
mounted () {
|
const that = this
|
|
this.$EventBus.$on('showTooltip', params => {
|
that.showTooltip(params)
|
})
|
|
this.$EventBus.$on('closeTooltip', () => {
|
that.closeTooltip()
|
})
|
},
|
|
methods: {
|
showTooltip (params) {
|
const that = this
|
|
this.handlerText = params.text
|
|
this.tooltipShow = true
|
|
that.updateWindowCoord(params.position)
|
},
|
|
closeTooltip () {
|
this.tooltipShow = false
|
},
|
|
updateWindowCoord (windowCoord) {
|
let x = windowCoord.x + 12
|
let y = windowCoord.y - this.$refs.toolTopBox.offsetHeight / 2
|
|
this.$refs.toolTopBox.style.cssText = `
|
position: fixed;
|
z-index:99;
|
transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
|
`
|
}
|
},
|
|
destroyed () {
|
this.$EventBus.$off('showTooltip')
|
this.$EventBus.$off('closeTooltip')
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tool-text {
|
position: relative;
|
padding: 0.6vh;
|
color: #fff;
|
background: rgba(0, 0, 0, .7);
|
border-radius: 0.6vh;
|
}
|
|
.tool-text::after {
|
content: '';
|
position: absolute;
|
left: -0.8vh;
|
border-top: 0.8vh solid transparent;
|
border-right: 0.8vh solid rgba(0, 0, 0, .7);
|
border-bottom: 0.8vh solid transparent;
|
}
|
</style>
|
