uniapp封装文字提示气泡框toolTip组件
文字提示气泡框：toolTip
因为uniapp 中小程序中没有window对象，需手动调用 关闭
第一种办法关闭：this.$refs.tooltip.close()
第二种办法关闭：visible.sync = false
移动端没有现成的toolTip组件，所以封装了
效果：
html
<!-- 文字提示气泡框：toolTip -->
<!-- 因为uniapp 中小程序中没有window对象，需手动调用 关闭
第一种办法关闭：this.$refs.tooltip.close()
第二种办法关闭：visible.sync = false -->
<template>
<view class="zb-tooltip" :style="{
'--theme-bg-color':color
}">
<view class="zb_tooltip_content" @click.stop="handleClick">
<slot></slot>
<view class="zb_tooltip__popper" @click.stop="()=>{}" :style="[style,{
visibility:isShow?'visible':'hidden',
color:color==='white'?'':'#fff',
boxShadow: color==='white'?'0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d':''
}]">
<slot name="content">{{content}}</slot>
<view class="zb_popper__icon" :style="[arrowStyle]" :class="[{
'zb_popper__up':placement.indexOf('bottom')===0,
'zb_popper__arrow':placement.indexOf('top')===0,
'zb_popper__right':placement.indexOf('right')===0,
'zb_popper__left':placement.indexOf('left')===0,
}]">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
visible: Boolean,
color: {
type: String,
default: '#FFF',
},
placement: {
type: String,
default: 'top',
},
content: {
type: String,
default: ''
},
show: {
type: Boolean,
default: false,
}
},
data() {
return {
isShow: this.visible,
title: 'Hello',
arrowLeft: 0,
query: null,
style: {
},
arrowStyle: {}
}
},
onLoad() {
},
watch: {
isShow: {
handler(val) {
this.$emit('update:visible', val)
},
immediate: true,
},
visible: {
handler(val) {
if (val) {
this.$nextTick(() => {
this.getPosition()
})
}
this.isShow = val
},
immediate: true,
}
},
mounted() {
// #ifdef H5
window.addEventListener('click', () => {
this.isShow = false
})
// #endif
this.getPosition()
},
methods: {
close() {
this.isShow = false
},
fixedWrap() {
this.isShow = false
},
async handleClick() {
if (this.isShow) {
return this.isShow = false
}
await this.getPosition()
this.isShow = true
},
getPosition() {
return new Promise((resolve) => {
uni.createSelectorQuery().in(this).selectAll('.zb_tooltip_content,.zb_tooltip__popper')
.boundingClientRect(async (data) => {
let {
left,
bottom,
right,
top,
width,
height
} = data[0]
let obj1 = data[1]
let objStyle = {}
let objStyle1 = {}
switch (this.placement) {
case 'top':
if (obj1.width > width) {
objStyle.left = `-${(obj1.width - width)/2}px`
} else {
objStyle.left = `${Math.abs(obj1.width - width)/2}px`
}
objStyle.bottom = `${height+8}px`
objStyle1.left = (obj1.width / 2 - 6) + 'px'
break;
case 'top-start':
objStyle.left = `0px`
objStyle.bottom = `${height+8}px`
break;
case 'top-end':
objStyle.right = `0px`
objStyle.bottom = `${height+8}px`
objStyle1.right = `8px`
break;
case 'bottom':
if (obj1.width > width) {
objStyle.left = `-${(obj1.width - width)/2}px`
} else {
objStyle.left = `${Math.abs(obj1.width - width)/2}px`
}
objStyle.top = `${height+8}px`
objStyle1.left = (obj1.width / 2 - 6) + 'px'
break;
case 'bottom-start':
objStyle.left = `0px`
objStyle.top = `${height+8}px`
objStyle1.left = `8px`
break;
case 'bottom-end':
objStyle.right = `0px`
objStyle.top = `${height+8}px`
objStyle1.right = `8px`
break;
case 'right':
objStyle.left = `${width+8}px`
if (obj1.height > height) {
objStyle.top = `-${(obj1.height - height)/2}px`
} else {
objStyle.top = `${Math.abs((obj1.height - height)/2)}px`
}
objStyle1.top = `${obj1.height/2-6}px`
break;
case 'right-start':
objStyle.left = `${width+8}px`
objStyle.top = `0px`
objStyle1.top = `8px`
break;
case 'right-end':
objStyle.left = `${width+8}px`
objStyle.bottom = `0px`
objStyle1.bottom = `8px`
break;
case 'left':
objStyle.right = `${width+8}px`
if (obj1.height > height) {
objStyle.top = `-${(obj1.height - height)/2}px`
} else {
objStyle.top = `${Math.abs((obj1.height - height)/2)}px`
}
objStyle1.top = `${obj1.height/2-6}px`
break;
case 'left-start':
objStyle.right = `${width+8}px`
objStyle.top = `0px`
objStyle1.top = `8px`
break;
case 'left-end':
objStyle.right = `${width+8}px`
objStyle.bottom = `0px`
objStyle1.bottom = `8px`
break;
}
this.style = objStyle
// 三角形箭头
this.arrowStyle = objStyle1
resolve()
}).exec()
})
}
}
}
</script>
<style lang="scss" scoped>
$theme-bg-color: var(--theme-bg-color);
.zb-tooltip {
position: relative;
}
.zb_tooltip_content {
height: 100%;
position: relative;
display: inline-block;
}
.zb_tooltip__popper {
background: $theme-bg-color;
visibility: hidden;
// color:'#fff';
position: absolute;
margin-top: 3.91rpx;
border-radius: 2.56rpx;
font-size: 8.59rpx;
padding: 0 3.91rpx;
min-width: 5.91rpx;
word-wrap: break-word;
display: inline-block;
white-space: nowrap;
z-index: 9;
}
.zb_popper__icon {
width: 0;
height: 0;
z-index: 9;
position: absolute;
}
.zb_popper__arrow {
bottom: -5px;
/* transform-origin: center top; */
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $theme-bg-color;
}
.zb_popper__right {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid $theme-bg-color;
left: -5px;
}
.zb_popper__left {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid $theme-bg-color;
right: -5px;
}
.zb_popper__up {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $theme-bg-color;
top: -5px;
}
.fixed {
position: absolute;
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
pointer-events: auto;
background: red;
z-index: -1;
}
</style>