dandelionPlatformToB-uni-v3/components/Tooltip.vue

<template>
	<view
		class="zb-tooltip"
		:style="{
			'--theme-bg-color': color,
		}"
	>
		<view class="zb_tooltip_content" @longpress.stop="handleClick">
			<slot></slot>
			<view class="zb_tooltip__mask" @longpress.stop v-show="isShow" @click="close"></view>
			<view
				class="zb_tooltip__popper"
				@tap.stop="() => {}"
				:style="[
					style,
					{
						visibility: isShow ? 'visible' : 'hidden',
						color: color === 'white' ? '#333' : '#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 {
	name: "Tooltip",
	props: {
		visible: Boolean,
		rowPosition: {
			type: String,
			default: "",
		},
		message: {
			type: Object,
			default: {},
		},
		color: {
			type: String,
			default: "#303133",
		},
		// placement: {
		//   type: String,
		//   default: 'top',
		// },
		content: {
			type: String,
			default: "",
		},
		show: {
			type: Boolean,
			default: false,
		},
		// 弹窗顶部距离顶部多少时，自动调整位置
		top: {
			type: Number,
			default: 150,
		},
	},

	data() {
		return {
			isShow: this.visible,
			title: "Hello",
			arrowLeft: 0,
			query: null,
			style: {},
			arrowStyle: {},
			placement: "top",
		};
	},
	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() {
      // console.log('this.isShow',this.isShow);
			this.isShow = false;
		},
		fixedWrap() {
			this.isShow = false;
		},
		async handleClick() {
			if (this.message && this.message.type == "tip") {
				return false;
			}
			if (this.isShow) {
				return (this.isShow = false);
			}
			await this.getPosition();
			this.isShow = true;
		},
		getPosition() {
			let that = this;
			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 windowInfo = uni.getWindowInfo();
						// console.log("windowInfo", windowInfo);
						// console.log("data[0]", data[0]);
						let obj1 = data[1] || {};
						let objStyle = {};
						let objStyle1 = {};
						if (top <= that.top) {
							this.placement = "bottom";
						} else {
							this.placement = "top";
						}
						if (this.rowPosition == "left") {
							objStyle.left = "0%";
							// objStyle.transform = "translateX(-50%)";
						} else if (this.rowPosition == "right") {
							objStyle.right = "0%";
							// objStyle.transform = "translateX(50%)";
						} else {
							objStyle.left = "50%";
						}
						switch (this.placement) {
							case "top":
								// if (obj1.width > width) {
								//   objStyle.left = `-${(obj1.width - width + 120) / 2}px`
								// } else {
								//   objStyle.left = `${Math.abs(obj1.width - width) / 2}px`
								// }

								objStyle.bottom = `${height + 4}px`;
								// objStyle.left = '30%'
								// objStyle1.left = obj1.width - 6 + 'px'
								break;
							case "bottom":
								// if (obj1.width > width) {
								//   objStyle.left = `-${(obj1.width - width) / 2}px`
								// } else {
								//   objStyle.left = `${Math.abs(obj1.width - width) / 2}px`
								// }
								// if (!this.isSelf) {
								// 	objStyle.transform = "translateX(-50%)";
								// } else {
								// 	objStyle.transform = "translateX(-50%)";
								// }
								// objStyle.left = "50%";
								// objStyle.left = `-${obj1.width - width - 100}px`
								objStyle.top = `${height + 4}px`;
								// objStyle1.left = obj1.width / 2 - 6 + 'px'
								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%;
	/* 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: 10px;
	font-size: 12px;
	padding: 10px 16px;
	min-width: 10px;
	word-wrap: break-word;
	display: inline-block;
	white-space: nowrap;
	z-index: 99;
}

.zb_tooltip__mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: rgba(256, 256, 256, 0);
	z-index: 98;
}

.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>