uview-plus 3.4.105 → 3.4.107

package/changelog.md

@@ -1,3 +1,9 @@
+## 3.4.107（2025-08-20）
+feat: input组件支持密码显示切换
+
+## 3.4.106（2025-08-20）
+feat: tooltip组件支持左右方向弹窗
+
 ## 3.4.105（2025-08-19）
 feat: 增加markdown解析器组件AI对话流式响应示例
 

package/components/u-input/input.js

@@ -3,9 +3,9 @@
  * @Description  :
  * @version      : 1.0
  * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : LQ
- * @lastTime     : 2021-08-20 17:13:55
- * @FilePath     : /u-view2.0/uview-ui/libs/config/props/input.js
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-08-20 10:21:55
+ * @FilePath     : /uview-plus/libs/config/props/input.js
  */
 export default {
 	// index 组件
@@ -44,6 +44,7 @@ export default {
 		readonly: false,
 		shape: 'square',
 		formatter: null,
-		cursorColor: ''
+		cursorColor: '',
+		passwordVisibilityToggle: true
 	}
 }

package/components/u-input/props.js

@@ -199,5 +199,10 @@ export const props = defineMixin({
 			type: String,
 			default: () => defProps.input.cursorColor
 		},
+		// 密码类型可见性切换
+		passwordVisibilityToggle: {
+			type: Boolean,
+			default: () => defProps.input.passwordVisibilityToggle
+		}
 	}
 })

package/components/u-input/u-input.vue

@@ -21,7 +21,7 @@
                     ref="input-native"
             	    class="u-input__content__field-wrapper__field"
             	    :style="[inputStyle]"
-            	    :type="type"
+            	    :type="showPassword && 'password' == type ? 'text' : type"
             	    :focus="focus"
             	    :cursor="cursor"
             	    :value="innerValue"
@@ -39,7 +39,7 @@
             	    :adjust-position="adjustPosition"
             	    :selection-end="selectionEnd"
             	    :selection-start="selectionStart"
-            	    :password="password || type === 'password' || false"
+            	    :password="isPassword"
                     :ignoreCompositionEvent="ignoreCompositionEvent"
             	    @input="onInput"
             	    @blur="onBlur"
@@ -61,6 +61,15 @@
                     customStyle="line-height: 12px"
                 ></up-icon>
             </view>
+            <view
+                class="u-input__content__subfix-password-shower"
+                v-if="(type == 'password' || password) && passwordVisibilityToggle"
+            >
+                <up-icon @click="showPassword = !showPassword"
+                    :name="showPassword ? 'eye-off' : 'eye-fill'"
+                    size="18"
+                ></up-icon>
+            </view>
             <view
                 class="u-input__content__subfix-icon"
                 v-if="suffixIcon || $slots.suffix"
@@ -142,7 +151,8 @@ export default {
             // value绑定值的变化是由内部还是外部引起的
             changeFromInner: false,
 			// 过滤处理方法
-			innerFormatter: value => value
+			innerFormatter: value => value,
+            showPassword: false
         };
     },
     created() {
@@ -178,6 +188,21 @@ export default {
         }
     },
     computed: {
+        // 是否密码
+        isPassword() {
+            let ret = false;
+            if(this.password) {
+                ret = true;
+            } else if (this.type == 'password') {
+                ret = true;
+            } else {
+                ret = false;
+            }
+            if (this.showPassword) {
+                ret = false;
+            }
+            return ret;
+        },
         // 是否显示清除控件
         isShowClear() {
             const { clearable, readonly, focused, innerValue } = this;

package/components/u-tooltip/props.js

@@ -32,7 +32,7 @@ export const props = defineMixin({
             type: String,
             default: () => defProps.tooltip.popupBgColor
         },
-        // 弹出提示的方向，top-上方，bottom-下方
+        // 弹出提示的方向，top-上方，bottom-下方，left-左方，right-右方
         direction: {
             type: String,
             default: () => defProps.tooltip.direction
@@ -68,4 +68,4 @@ export const props = defineMixin({
             default: () => defProps.tooltip.triggerMode
         },
     }
-})
+})

package/components/u-tooltip/u-tooltip.vue

@@ -9,13 +9,12 @@
 			@click="overlayClickHandler"
 		></u-overlay>
 		<view class="u-tooltip__wrapper">
-			<view class="u-tooltip__trigger" @click.stop="clickHander"
+			<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"
-					:id="textId"
-					:ref="textId"
 					:userSelect="false"
 					:selectable="false"
 					:style="{
@@ -156,11 +155,13 @@
 				screenGap: 12,
 				// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
 				indicatorWidth: 14,
+				tooltipStyle: {}
 			}
 		},
 		watch: {
-			propsChange() {
-				this.getElRect()
+			async propsChange() {
+				await this.getElRect()
+				this.getTooltipStyle();
 			}
 		},
 		computed: {
@@ -169,37 +170,7 @@
 			propsChange() {
 				return [this.text, this.buttons]
 			},
-			// 计算气泡和指示器的位置信息
-			tooltipStyle() {
-				const style = {
-						transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
-					},
-					sysInfo = getWindowInfo()
-				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 > 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 = {}
-				}
-				if (this.direction === 'top') {
-					style.marginTop = '-10px'
-					this.indicatorStyle.bottom = '-4px'
-				} else {
-					style.marginBottom = '-10px'
-					this.indicatorStyle.top = '-4px'
-				}
-				return style
-			}
+			
 		},
 		mounted() {
 			this.init()
@@ -208,11 +179,64 @@
 		methods: {
 			addStyle,
 			addUnit,
-			init() {
-				this.getElRect()
+			async init() {
+				await this.getElRect()
+				this.getTooltipStyle();
+			},
+			// 计算气泡和指示器的位置信息
+			getTooltipStyle() {
+				const style = {},
+					sysInfo = getWindowInfo()
+				if (this.direction === 'left') {
+					// 右侧显示逻辑
+					style.transform = ``
+					// 垂直居中对齐
+					style.top = '-' + addUnit((this.tooltipInfo.height - this.indicatorWidth) / 2, 'px')
+					style.right = addUnit(this.textInfo.width + this.indicatorWidth, 'px')
+					this.indicatorStyle = {}
+					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.textInfo.height - this.tooltipInfo.height) / 2, 'px')
+					style.left = addUnit(this.textInfo.width + this.indicatorWidth, 'px')
+					this.indicatorStyle = {}
+					this.indicatorStyle.left = '-4px'
+					this.indicatorStyle.top = addUnit((this.textInfo.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.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, 'px')
+					} 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 = {}
+					}
+					if (this.direction === 'top') {
+						style.marginTop = '-10px'
+						this.indicatorStyle.bottom = '-4px'
+					} else {
+						style.marginBottom = '-10px'
+						this.indicatorStyle.top = '-4px'
+					}
+				}
+				this.tooltipStyle = style
+				return style
 			},
 			// 点击触发事件
-			clickHander() {
+			async clickHander() {
+				// this.getTooltipStyle();
 				if (this.triggerMode == 'click') {
 					this.tooltipTop = 0
 					this.showTooltip = true
@@ -220,6 +244,7 @@
 			},
 			// 长按触发事件
 			async longpressHandler() {
+				// this.getTooltipStyle();
 				if (this.triggerMode == 'longpress') {
 					this.tooltipTop = 0
 					this.showTooltip = true
@@ -238,7 +263,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 => {
@@ -259,17 +284,16 @@
 			},
 			// 元素尺寸
 			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.textInfo = await this.queryRect(this.textId)
+						resolve()
 					})
 				})
 			},
@@ -360,4 +384,4 @@
 			}
 		}
 	}
-</style>
+</style>

package/package.json

@@ -2,8 +2,8 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.4.105",
-  "description": "零云®uview-plus已兼容vue3，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名等。",
+  "version": "3.4.107",
+  "description": "零云®uview-plus已兼容vue3，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",
     "uview-plus",