uniapp封装文字提示气泡框toolTip组件

uniapp封装文字提示气泡框toolTip组件

index.php/tags-41973.html" >���字提示气泡框：toolTip

因为uniapp 中小程序中没有window对象，需手动调用 关闭

第一种办法关闭：this.$refs.tooltip.close()

第二种办法关闭：visible.sync = false

移动端没有现成的toolTip组件，所以封装了

效果：

{{content}}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 H5window.addEventListener('click', () => {this.isShow = false})// #endifthis.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 = objStyle1resolve()}).exec()})}}}$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;}