ycwh/miniapp/pages/components/tooltip.vue

<template>
<view
	class="u-tooltip"
	:style="[$u.addStyle(customStyle)]"
>
	<u-overlay
		:show="showTooltip && tooltipTop !== -10000 && overlay"
		customStyle="backgroundColor: rgba(0, 0, 0, 0)"
		@click="overlayClickHandler"
	></u-overlay>
	<view class="u-tooltip__wrapper">
		<view
			class="u-tooltip__wrapper__text"
			:id="textId"
			:ref="textId"
			:userSelect="false"
			:selectable="false"
			@longpress.stop="longpressHandler"
			:style="{
				color: color,
				backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
			}"
		><slot></slot></view>
		<u-transition
			mode="fade"
			:show="showTooltip"
			duration="200"
			:customStyle="{
				position: 'absolute', 
				top: $u.addUnit(tooltipTop),
				zIndex: zIndex,
				...tooltipStyle
			}"
		>
			<view
				class="u-tooltip__wrapper__popup"
				:id="tooltipId"
				:ref="tooltipId"
			>
				<view
					class="u-tooltip__wrapper__popup__indicator"
					hover-class="u-tooltip__wrapper__popup__indicator--hover"
					v-if="buttons.length"
					:style="[indicatorStyle, {
						width: $u.addUnit(indicatorWidth),
						height: $u.addUnit(indicatorWidth),
					}]"
				>
					<!-- 由于nvue不支持三角形绘制，这里就做一个四方形，再旋转45deg，得到露出的一个三角 -->
				</view>
				<view class="u-tooltip__wrapper__popup__list">
					<block v-for="(item , index) in buttons" :key="index">
						<view
							class="u-tooltip__wrapper__popup__list__btn"
							hover-class="u-tooltip__wrapper__popup__list__btn--hover"
						>
							<text
								class="u-tooltip__wrapper__popup__list__btn__text"
								@tap="btnClickHandler(index)"
							>{{ item }}</text>
						</view>
						<u-line
							direction="column"
							color="#8d8e90"
							v-if="index < buttons.length - 1"
							length="18"
						></u-line>
					</block>
				</view>
			</view>
		</u-transition>
	</view>
</view>
</template>

<script>
// import props from './props.js';
// #ifdef APP-NVUE 
const dom = uni.requireNativePlugin('dom')
// #endif
export default {
	// mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
	props: {
		// 文本大小
		size: {
			type: [String, Number],
			default: 14,
		},
		// 字体颜色
		color: {
			type: String,
			default: 'black',
		},
		// 弹出提示框时，文本的背景色
		bgColor: {
			type: String,
			default: 'transparent',
		},
		// 弹出提示的方向，top-上方，bottom-下方
		direction: {
			type: String,
			default: 'top',
		},
		// 扩展的按钮组
		buttons: {
			type: Array,
			default: [],
		},
	},
	data() {
		return {
			overlay: true,// 是否显示透明遮罩以防止触摸穿透
			zIndex: 10071,// 弹出提示的z-index，nvue无效（默认 10071 ）
			
			// 是否展示气泡
			showTooltip: true,
			// 生成唯一id，防止一个页面多个组件，造成干扰
			textId: uni.$u.guid(),
			tooltipId: uni.$u.guid(),
			// 初始时甚至为很大的值，让其移到屏幕外面，为了计算元素的尺寸
			tooltipTop: -10000,
			// 气泡的位置信息
			tooltipInfo: {
				width: 0,
				left: 0
			},
			// 文本的位置信息
			textInfo: {
				width: 0,
				left: 0
			},
			// 三角形指示器的样式
			indicatorStyle: {},
			// 气泡在可能超出屏幕边沿范围时，重新定位后，距离屏幕边沿的距离
			screenGap: 12,
			// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
			indicatorWidth: 14,
		}
	},
	watch: {
		propsChange() {
			this.getElRect()
		}
	},
	computed: {
		// 特别处理H5的复制，因为H5浏览器是自带系统复制功能的，在H5环境
		// 当一些依赖参数变化时，需要重新计算气泡和指示器的位置信息
		propsChange() {
			// return [this.text, this.buttons]
			return [this.buttons]
		},
		// 计算气泡和指示器的位置信息
		tooltipStyle() {
			const style = {
					transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
				},
				sys = uni.$u.sys(),
				getPx = uni.$u.getPx,
				addUnit = uni.$u.addUnit
			if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
				this.indicatorStyle = {}
				style.left = `-${addUnit(this.textInfo.left - this.screenGap)}`
				this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this.indicatorWidth /
					2)
			} else if (this.tooltipInfo.width / 2 > sys.windowWidth - this.textInfo.right + this.textInfo.width / 2 -
				this.screenGap) {
				this.indicatorStyle = {}
				style.right = `-${addUnit(sys.windowWidth - this.textInfo.right - this.screenGap)}`
				this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this
					.indicatorWidth / 2)
			} else {
				const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2)
				style.left = this.textInfo.width > this.tooltipInfo.width ? addUnit(left) : -addUnit(left)
				this.indicatorStyle = {}
			}
			if (this.direction === 'top') {
				style.marginTop = '-10px'
				this.indicatorStyle.bottom = '-4px'
			} else {
				style.marginBottom = '-10px'
				this.indicatorStyle.top = '-4px'
			}
			return style
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			this.getElRect()
		},
		// 长按触发事件
		async longpressHandler() {
			this.tooltipTop = 0
			this.showTooltip = true
		},
		// 点击透明遮罩
		overlayClickHandler() {
			this.showTooltip = false
		},
		// 点击弹出按钮
		btnClickHandler(index) {
			this.showTooltip = false
			// 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
			this.$emit('click', index)
		},
		// 查询内容高度
		queryRect(ref) {
			// #ifndef APP-NVUE
			// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
			// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
			return new Promise(resolve => {
				this.$uGetRect(`#${ref}`).then(size => {
					resolve(size)
				})
			})
			// #endif

			// #ifdef APP-NVUE
			// nvue下，使用dom模块查询元素高度
			// 返回一个promise，让调用此方法的主体能使用then回调
			return new Promise(resolve => {
				dom.getComponentRect(this.$refs[ref], res => {
					resolve(res.size)
				})
			})
			// #endif
		},
		// 元素尺寸
		getElRect() {
			// 调用之前，先将指示器调整到屏幕外，方便获取尺寸
			this.showTooltip = true
			this.tooltipTop = -10000
			uni.$u.sleep(500).then(() => {
				this.queryRect(this.tooltipId).then(size => {
					this.tooltipInfo = size
					// 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
					this.showTooltip = false
				})
				this.queryRect(this.textId).then(size => {
					this.textInfo = size
				})
			})
		},
	}
}
</script>

<style lang="scss" scoped>
@import "@/uview-ui/libs/css/components.scss";

.u-tooltip {
	position: relative;
	@include flex;

	&__wrapper {
		@include flex;
		justify-content: center;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		/* #endif */

		&__text {
			font-size: 14px;
		}

		&__popup {
			@include flex;
			justify-content: center;

			&__list {
				background-color: #060607;
				position: relative;
				flex: 1;
				border-radius: 5px;
				padding: 0px 0;
				@include flex(row);
				align-items: center;
				overflow: hidden;

				&__btn {
					padding: 11px 13px;

					&--hover {
						background-color: #58595B;
					}

					&__text {
						line-height: 12px;
						font-size: 13px;
						color: #FFFFFF;
					}
				}
			}

			&__indicator {
				position: absolute;
				background-color: #060607;
				width: 14px;
				height: 14px;
				bottom: -4px;
				transform: rotate(45deg);
				border-radius: 2px;
				z-index: -1;

				&--hover {
					background-color: #58595B;
				}
			}
		}
	}
}
</style>