uniapp封装文字提示气泡框toolTip组件-编程知识

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

文字提示气泡框：toolTip
因为uniapp 中小程序中没有window对象，需手动调用关闭
第一种办法关闭：this.$refs.tooltip.close()
第二种办法关闭：visible.sync = false

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

效果：

在这里插入图片描述

<!-- 文字提示气泡框：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 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()})}}}
</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>