uview-plus组件库全面升级更新，订单结算判断支付方式是否可用代码调整，公众号关注二维码修改

2025-10-21 10:44:31 +08:00
parent 5d98b7efc2
commit 5f3a307fec
395 changed files with 31264 additions and 2477 deletions
--- a/uni_modules/uview-plus/components/u-tooltip/props.js
+++ b/uni_modules/uview-plus/components/u-tooltip/props.js
@@ -27,7 +27,12 @@ export const props = defineMixin({
            type: String,
            default: () => defProps.tooltip.bgColor
        },
-        // 弹出提示的方向，top-上方，bottom-下方
+        // 弹出提示框的背景色
+        popupBgColor: {
+            type: String,
+            default: () => defProps.tooltip.popupBgColor
+        },
+        // 弹出提示的方向，top-上方，bottom-下方，left-左方，right-右方
        direction: {
            type: String,
            default: () => defProps.tooltip.direction
@@ -56,6 +61,16 @@ export const props = defineMixin({
        showToast: {
            type: Boolean,
            default: () => defProps.tooltip.showToast
+        },
+        // 触发方式，可选值：longpress/click
+        triggerMode: {
+            type: String,
+            default: () => defProps.tooltip.triggerMode
+        },
+        // 强制定位
+        forcePosition: {
+            type: Object,
+            default: () => defProps.tooltip.forcePosition
        }
    }
-})
+})
--- a/uni_modules/uview-plus/components/u-tooltip/tooltip.js
+++ b/uni_modules/uview-plus/components/u-tooltip/tooltip.js
@@ -20,6 +20,9 @@ export default {
        showCopy: true,
        buttons: [],
        overlay: true,
-        showToast: true
+        showToast: true,
+        popupBgColor: '',
+        triggerMode: 'longpress',
+        forcePosition: {}
    }
 }
--- a/uni_modules/uview-plus/components/u-tooltip/u-tooltip.vue
+++ b/uni_modules/uview-plus/components/u-tooltip/u-tooltip.vue
@@ -9,27 +9,29 @@
 			@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>
+			<view class="u-tooltip__trigger" :id="textId"
+				:ref="textId" @click.stop="clickHander"
+				@longpress.stop="longpressHandler">
+				<slot name="trigger"></slot>
+				<text v-if="!$slots['trigger']"
+					class="u-tooltip__wrapper__text"
+					:userSelect="false"
+					:selectable="false"
+					:style="{
+						color: color,
+						backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
+					}"
+				>{{ text }}</text>
+			</view>
 			<u-transition
 				mode="fade"
 				:show="showTooltip"
 				duration="300"
 				:customStyle="{
 					position: 'absolute', 
-					top: addUnit(tooltipTop),
+					top: addUnit(tooltipTop, 'px'),
 					zIndex: zIndex,
-					...tooltipStyle
+					...tooltipStyleCpu
 				}"
 			>
 				<view
@@ -44,44 +46,52 @@
 						:style="[indicatorStyle, {
 							width: addUnit(indicatorWidth),
 							height: addUnit(indicatorWidth),
+							backgroundColor: popupBgColor
 						}]"
 					>
 						<!-- 由于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" :style="{
+						backgroundColor: popupBgColor,
+						color: color
+					}">
+						<slot name="content"></slot>
+						<template v-if="!$slots['content']">
 							<view
+								v-if="showCopy"
 								class="u-tooltip__wrapper__popup__list__btn"
 								hover-class="u-tooltip__wrapper__popup__list__btn--hover"
+								:style="{backgroundColor: popupBgColor}"
+								@tap="setClipboardData"
 							>
 								<text
 									class="u-tooltip__wrapper__popup__list__btn__text"
-									@tap="btnClickHandler(index)"
-								>{{ item }}</text>
+								>复制</text>
 							</view>
 							<u-line
 								direction="column"
 								color="#8d8e90"
-								v-if="index < buttons.length - 1"
+								v-if="showCopy && buttons.length > 0"
 								length="18"
 							></u-line>
-						</block>
+							<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>
+						</template>
 					</view>
 				</view>
 			</u-transition>
@@ -101,17 +111,18 @@
 	 * Tooltip 
 	 * @description 
 	 * @tutorial https://ijry.github.io/uview-plus/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	定义需要用到的外部样式
+	 * @property {String | Number}	text		 需要显示的提示文字
+	 * @property {String | Number}	copyText	 点击复制按钮时，复制的文本，为空则使用text值
+	 * @property {String | Number}	size		 文本大小（默认 14 ）
+	 * @property {String}			color		 字体颜色（默认 '#606266' ）
+	 * @property {String}			bgColor		 弹出提示框时，文本的背景色（默认 'transparent' ）
+	 * @property {String}			popupBgColor 弹出提示框的背景色
+	 * @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 
@@ -134,7 +145,7 @@
 					left: 0
 				},
 				// 文本的位置信息
-				textInfo: {
+				triggerInfo: {
 					width: 0,
 					left: 0
 				},
@@ -144,11 +155,14 @@
 				screenGap: 12,
 				// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
 				indicatorWidth: 14,
+				tooltipStyle: {},
+				calcReacted: false
 			}
 		},
 		watch: {
-			propsChange() {
-				this.getElRect()
+			async propsChange() {
+				await this.getElRect()
+				// this.getTooltipStyle();
 			}
 		},
 		computed: {
@@ -158,35 +172,59 @@
 				return [this.text, this.buttons]
 			},
 			// 计算气泡和指示器的位置信息
-			tooltipStyle() {
-				const style = {
-						transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
-					},
+			tooltipStyleCpu() {
+				if (!this.calcReacted) {
+					return {}
+				}
+				const style = {},
 					sysInfo = getWindowInfo()
-				if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
+				if (this.direction === 'left') {
+					// 右侧显示逻辑
+					style.transform = ``
+					// 垂直居中对齐
+					style.top = '-' + addUnit((this.triggerInfo.height - this.tooltipInfo.height) / 2, 'px')
+					style.right = addUnit(this.triggerInfo.width + this.indicatorWidth, 'px')
 					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 > sysInfo.windowWidth - this.textInfo.right + this.textInfo.width / 2 -
-					this.screenGap) {
-					this.indicatorStyle = {}
-					style.right = `-${addUnit(sysInfo.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.right = '-4px'
+					this.indicatorStyle.top = addUnit((this.tooltipInfo.height - this.indicatorWidth) / 2, 'px')
+				} else if (this.direction === 'right') {
+					// 右侧显示逻辑
+					style.transform = ``
+					// 垂直居中对齐
+					style.top = '-' + addUnit((this.triggerInfo.height - this.tooltipInfo.height) / 2, 'px')
+					style.left = addUnit(this.triggerInfo.width + this.indicatorWidth, 'px')
 					this.indicatorStyle = {}
+					this.indicatorStyle.left = '-4px'
+					this.indicatorStyle.top = addUnit((this.triggerInfo.height - this.indicatorWidth) / 2, 'px')
+				} else if (this.direction === 'top' || this.direction === 'bottom') { 
+					style.transform = `translateY(${this.direction === 'top' ? '-100%' : '100%'})`
+					if (this.tooltipInfo.width / 2 > this.triggerInfo.left + this.triggerInfo.width / 2 - this.screenGap) {
+						this.indicatorStyle = {}
+						style.left = `-${addUnit(this.triggerInfo.left - this.screenGap)}`
+						this.indicatorStyle.left = addUnit(this.triggerInfo.width / 2 - getPx(style.left) - this.indicatorWidth /
+							2, 'px')
+					} else if (this.tooltipInfo.width / 2 > sysInfo.windowWidth - this.triggerInfo.right + this.triggerInfo.width / 2 -
+						this.screenGap) {
+						this.indicatorStyle = {}
+						style.right = `-${addUnit(sysInfo.windowWidth - this.triggerInfo.right - this.screenGap)}`
+						this.indicatorStyle.right = addUnit(this.triggerInfo.width / 2 - getPx(style.right) - this
+							.indicatorWidth / 2)
+					} else {
+						const left = Math.abs(this.triggerInfo.width / 2 - this.tooltipInfo.width / 2)
+						style.left = this.triggerInfo.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'
+					}
 				}
-				if (this.direction === 'top') {
-					style.marginTop = '-10px'
-					this.indicatorStyle.bottom = '-4px'
-				} else {
-					style.marginBottom = '-10px'
-					this.indicatorStyle.top = '-4px'
-				}
-				return style
+				let styleMerge = {...style, ...this.forcePosition}
+				this.tooltipStyle = styleMerge
+				return styleMerge
 			}
 		},
 		mounted() {
@@ -196,13 +234,25 @@
 		methods: {
 			addStyle,
 			addUnit,
-			init() {
-				this.getElRect()
+			async init() {
+				await this.getElRect()
+				// this.getTooltipStyle();
+			},
+			// 点击触发事件
+			async clickHander() {
+				// this.getTooltipStyle();
+				if (this.triggerMode == 'click') {
+					this.tooltipTop = 0
+					this.showTooltip = true
+				}
 			},
 			// 长按触发事件
 			async longpressHandler() {
-				this.tooltipTop = 0
-				this.showTooltip = true
+				// this.getTooltipStyle();
+				if (this.triggerMode == 'longpress') {
+					this.tooltipTop = 0
+					this.showTooltip = true
+				}
 			},
 			// 点击透明遮罩
 			overlayClickHandler() {
@@ -217,7 +267,7 @@
 			// 查询内容高度
 			queryRect(ref) {
 				// #ifndef APP-NVUE
-				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
+				// $uGetRect为uview-plus自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
 				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
 				return new Promise(resolve => {
 					this.$uGetRect(`#${ref}`).then(size => {
@@ -238,17 +288,19 @@
 			},
 			// 元素尺寸
 			getElRect() {
-				// 调用之前，先将指示器调整到屏幕外，方便获取尺寸
-				this.showTooltip = true
-				this.tooltipTop = -10000
-				sleep(500).then(() => {
-					this.queryRect(this.tooltipId).then(size => {
-						this.tooltipInfo = size
+				return new Promise(async(resolve) => {
+					// 调用之前，先将指示器调整到屏幕外，方便获取尺寸
+					this.showTooltip = true
+					this.tooltipTop = -10000
+					sleep(500).then(async () => {
+						this.tooltipInfo = await this.queryRect(this.tooltipId)
 						// 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
 						this.showTooltip = false
-					})
-					this.queryRect(this.textId).then(size => {
-						this.textInfo = size
+						this.triggerInfo = await this.queryRect(this.textId)
+						sleep(500).then(() => {
+							this.calcReacted = true
+						})
+						resolve()
 					})
 				})
 			},
@@ -276,7 +328,6 @@
 </script>

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

 	.u-tooltip {
 		position: relative;
@@ -299,6 +350,7 @@

 				&__list {
 					background-color: #060607;
+					color: #FFFFFF;
 					position: relative;
 					flex: 1;
 					border-radius: 5px;
@@ -339,4 +391,4 @@
 			}
 		}
 	}
-</style>
+</style>