From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +0800
Subject: [PATCH] fix:小程序订阅消息

---
 uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue |  365 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 365 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue b/uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue
new file mode 100644
index 0000000..4bd8fc9
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue
@@ -0,0 +1,365 @@
+<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">
+			<text
+				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'
+				}"
+			>{{ text }}</text>
+			<u-transition
+				mode="fade"
+				:show="showTooltip"
+				duration="300"
+				: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="showCopy || buttons.length"
+						:style="[indicatorStyle, {
+							width: $u.addUnit(indicatorWidth),
+							height: $u.addUnit(indicatorWidth),
+						}]"
+					>
+						<!-- ������nvue������������������������������������������������������������������45deg������������������������������ -->
+					</view>
+					<view class="u-tooltip__wrapper__popup__list">
+						<view
+							v-if="showCopy"
+							class="u-tooltip__wrapper__popup__list__btn"
+							hover-class="u-tooltip__wrapper__popup__list__btn--hover"
+							@tap="setClipboardData"
+						>
+							<text
+								class="u-tooltip__wrapper__popup__list__btn__text"
+							>������</text>
+						</view>
+						<u-line
+							direction="column"
+							color="#8d8e90"
+							v-if="showCopy && buttons.length > 0"
+							length="18"
+						></u-line>
+						<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
+	// #ifdef H5
+	import ClipboardJS from "./clipboard.min.js"
+	// #endif
+	/**
+	 * Tooltip 
+	 * @description 
+	 * @tutorial https://www.uviewui.com/components/tooltip.html
+	 * @property {String | Number}	text		���������������������������
+	 * @property {String | Number}	copyText	���������������������������������������������������������text���
+	 * @property {String | Number}	size		��������������������� 14 ���
+	 * @property {String}			color		��������������������� '#606266' ���
+	 * @property {String}			bgColor		������������������������������������������������ 'transparent' ���
+	 * @property {String}			direction	������������������������top-���������bottom-��������������� 'top' ���
+	 * @property {String | Number}	zIndex		���������������z-index���nvue��������������� 10071 ���
+	 * @property {Boolean}			showCopy	��������������������������������� true ���
+	 * @property {Array}			buttons		������������������
+	 * @property {Boolean}			overlay		������������������������������������������������������ true ���
+	 * @property {Object}			customStyle	���������������������������������
+	 * 
+	 * @event {Function} 
+	 * @example 
+	 */
+	export default {
+		name: 'u-tooltip',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				// ������������������
+				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]
+			},
+			// ���������������������������������������
+			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', this.showCopy ? index + 1 : 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
+					})
+				})
+			},
+			// ������������������������
+			setClipboardData() {
+				// ������������
+				this.showTooltip = false
+				this.$emit('click', 0)
+				// #ifndef H5
+				uni.setClipboardData({
+					// ������������copyText���������������������������������������text���������������������������
+					data: this.copyText || this.text,
+					success: () => {
+						this.showToast && uni.$u.toast('������������')
+					},
+					fail: () => {
+						this.showToast && uni.$u.toast('������������')
+					},
+					complete: () => {
+						this.showTooltip = false
+					}
+				})
+				// #endif
+
+				// #ifdef H5
+				let event = window.event || e || {}
+				let clipboard = new ClipboardJS('', {
+					text: () => this.copyText || this.text
+				})
+				clipboard.on('success', (e) => {
+					this.showToast && uni.$u.toast('������������')
+					clipboard.off('success')
+					clipboard.off('error')
+					// ���������������������������������DOM���������
+					clipboard.destroy()
+				})
+				clipboard.on('error', (e) => {
+					this.showToast && uni.$u.toast('������������')
+					clipboard.off('success')
+					clipboard.off('error')
+					// ���������������������������������DOM���������
+					clipboard.destroy()
+				})
+				clipboard.onClick(event)
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../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>

--
Gitblit v1.8.0