dingdong-master/uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue

<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" :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:'#303133',
			},
			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){
					 this.isShow = val
					 if(val){
						 this.$nextTick(()=>{
							 this.handleClick()
						 })
					 }
				 },
				 immediate:true,
			}
		},
		mounted(){
			// #ifdef H5
			window.addEventListener('click',()=>{
				this.isShow = false
			})
			
			// #endif
		},
		methods: {
			close(){
				this.isShow = false
			},
			fixedWrap(){
				
				this.isShow = false
			},
			handleClick(){
				
				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
					this.isShow = true

				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	$theme-bg-color: var(--theme-bg-color);
	
	.zb-tooltip{
		position: relative;
		
	}
	.zb_tooltip_content{
		height: 100%;
		/* float: left; */
		position: relative;
		display: inline-block;
		
		// display: flex;
		// flex-direction: row;
		// align-items: center;
		/* overflow: hidden; */
	}
	.zb_tooltip__popper{
		/* transform-origin: center top; */
		background: $theme-bg-color;
		
		visibility: hidden;
		// color:'#fff';
		position: absolute;
		    border-radius: 4px;
			font-size: 12px;
			padding: 10px;
			min-width: 10px;
			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>