uview-plus 3.4.4 → 3.4.5

package/changelog.md

@@ -1,3 +1,8 @@
+## 3.4.5（2025-03-24）
+feat: tag组件新增textSize/height/padding/borderRadius属性
+
+feat: 新增genLightColor自动计算浅色方法及tag组件支持autoBgColor自动计算背景色
+
 ## 3.4.4（2025-03-13）
 feat: modal增加异步操作进行中点击取消弹出提示特性防止操作被中断
 

package/components/u-tag/props.js

@@ -82,9 +82,30 @@ export const props = defineMixin({
             type: String,
             default: () => defProps.tag.icon,
 		},
-		iconColor: {
+        // 自定义尺寸字体大小
+		textSize: {
             type: String,
-            default: () => defProps.tag.iconColor
-        }
+            default: () => defProps.tag.textSize
+        },
+        // 自定义尺寸高度
+        height: {
+            type: String,
+            default: () => defProps.tag.height
+        },
+        // 自定义尺寸padding
+        padding: {
+            type: String,
+            default: () => defProps.tag.padding
+        },
+        // 自定义尺寸
+        borderRadius: {
+            type: String,
+            default: () => defProps.tag.borderRadius
+        },
+        // 自动计算背景色
+        autoBgColor: {
+            type: Number,
+            default: () => defProps.tag.autoBgColor
+        },
     }
 })

package/components/u-tag/tag.js

@@ -25,6 +25,11 @@ export default {
 		closable: false,
 		show: true,
 		icon: '',
-		iconColor: ''
+		iconColor: '',
+		textSize: '',
+		height: '',
+		padding: '',
+		borderRadius: '',
+		autoBgColor: 0
 	}
 }

package/components/u-tag/u-tag.vue

@@ -64,6 +64,7 @@
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import test from '../../libs/function/test';
+	import { addUnit, genLightColor } from '../../libs/function/index';
 	/**
 	 * Tag 标签
 	 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
@@ -107,6 +108,19 @@
 				if(this.borderColor) {
 					style.borderColor = this.borderColor
 				}
+				if (this.height) {
+					style.height = addUnit(this.height)
+					style.lineHeight = addUnit(this.height)
+				}
+				if (this.padding) {
+					style.padding = this.padding
+				}
+				if (this.borderRadius) {
+					style.borderRadius = addUnit(this.borderRadius)
+				}
+				if (this.autoBgColor > 0 && this.color) {
+					style.backgroundColor = this.getBagColor(this.color)
+				}
 				return style
 			},
 			// nvue下，文本颜色无法继承父元素
@@ -115,6 +129,9 @@
 				if (this.color) {
 					style.color = this.color
 				}
+				if (this.textSize) {
+					style.textSize = addUnit(this.textSize)
+				}
 				return style
 			},
 			imgStyle() {
@@ -149,6 +166,10 @@
 			// 点击标签
 			clickHandler() {
 				this.$emit('click', this.name)
+			},
+			// 根据颜色计算浅色作为背景
+			getBagColor(darkColor) {
+				return genLightColor(darkColor, this.autoBgColor)
 			}
 		}
 	}

package/libs/function/index.js

@@ -49,12 +49,12 @@ export function sleep(value = 30) {
  * @returns {string} 返回所在平台(小写) 
  * @link 运行期判断平台 https://uniapp.dcloud.io/frame?id=判断平台
  */
-export function os() {
-	// #ifdef APP || H5 || MP-WEIXIN
-	return uni.getDeviceInfo().platform.toLowerCase()
-	// #endif
-	// #ifndef APP || H5 || MP-WEIXIN
-	return uni.getSystemInfoSync().platform.toLowerCase()
+export function os() {
+	// #ifdef APP || H5 || MP-WEIXIN
+	return uni.getDeviceInfo().platform.toLowerCase()
+	// #endif
+	// #ifndef APP || H5 || MP-WEIXIN
+	return uni.getSystemInfoSync().platform.toLowerCase()
 	// #endif
 }
 /**
@@ -63,26 +63,26 @@ export function os() {
  */
 export function sys() {
 	return uni.getSystemInfoSync()
-}
-export function getWindowInfo() {
-	let ret = {}
-	// #ifdef APP || H5 || MP-WEIXIN
-	ret = uni.getWindowInfo()
-	// #endif
-	// #ifndef APP || H5 || MP-WEIXIN
-	ret = sys()
-	// #endif
-	return ret
-}
-export function getDeviceInfo() {
-	let ret = {}
-	// #ifdef APP || H5 || MP-WEIXIN
-	ret = uni.getDeviceInfo()
-	// #endif
-	// #ifndef APP || H5 || MP-WEIXIN
-	ret = sys()
-	// #endif
-	return ret
+}
+export function getWindowInfo() {
+	let ret = {}
+	// #ifdef APP || H5 || MP-WEIXIN
+	ret = uni.getWindowInfo()
+	// #endif
+	// #ifndef APP || H5 || MP-WEIXIN
+	ret = sys()
+	// #endif
+	return ret
+}
+export function getDeviceInfo() {
+	let ret = {}
+	// #ifdef APP || H5 || MP-WEIXIN
+	ret = uni.getDeviceInfo()
+	// #endif
+	// #ifndef APP || H5 || MP-WEIXIN
+	ret = sys()
+	// #endif
+	return ret
 }
 
 /**
@@ -730,12 +730,99 @@ export function getValueByPath(obj, path) {
     }, obj);
 }
 
+/**
+ * 生成同色系浅色背景色
+ * @param {string} textColor - 支持 #RGB、#RRGGBB、rgb()、rgba() 格式
+ * @param {number} [lightness=85] - 目标亮度百分比（默认85%）
+ * @returns {string} 十六进制颜色值
+ */
+export function genLightColor(textColor, lightness = 95) {
+	// 手动解析颜色值（避免使用document）
+	const rgb = parseColorWithoutDOM(textColor);
+	
+	// RGB转HSL色域
+	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+	
+	// 生成浅色背景
+	const bgHsl = {
+	  h: hsl.h,
+	  s: hsl.s,
+	  l: Math.min(lightness, 95)
+	};
+	
+	return hslToHex(bgHsl.h, bgHsl.s, bgHsl.l);
+  }
+  
+  /* 手动解析颜色字符串（兼容uni-app环境） */
+  function parseColorWithoutDOM(colorStr) {
+	// 统一转小写处理
+	const str = colorStr.toLowerCase().trim();
+	
+	// 处理十六进制格式
+	if (str.startsWith('#')) {
+	  const hex = str.replace('#', '');
+	  const fullHex = hex.length === 3 ? 
+		hex.split('').map(c => c + c).join('') : hex;
+		
+	  return {
+		r: parseInt(fullHex.substring(0,2), 16),
+		g: parseInt(fullHex.substring(2,4), 16),
+		b: parseInt(fullHex.substring(4,6), 16)
+	  };
+	}
+	
+	// 处理rgb/rgba格式
+	const rgbMatch = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (rgbMatch) {
+	  return {
+		r: +rgbMatch[1],
+		g: +rgbMatch[2],
+		b: +rgbMatch[3]
+	  };
+	}
+	
+	throw new Error('Invalid color format');
+  }
+
+// 辅助函数：RGB 转 HSL（色相、饱和度、亮度）
+function rgbToHsl(r, g, b) {
+ r /= 255, g /= 255, b /= 255;
+ const max = Math.max(r, g, b), min = Math.min(r, g, b);
+ let h, s, l = (max + min) / 2;
+
+ if (max === min) {
+   h = s = 0; // achromatic
+ } else {
+   const d = max - min;
+   s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+   switch (max) {
+	 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+	 case g: h = (b - r) / d + 2; break;
+	 case b: h = (r - g) / d + 4; break;
+   }
+   h = (h * 60).toFixed(1);
+ }
+ return { h: +h, s: +(s * 100).toFixed(1), l: +(l * 100).toFixed(1) };
+}
+
+// 辅助函数：HSL 转十六进制
+function hslToHex(h, s, l) {
+ l /= 100;
+ const a = s * Math.min(l, 1 - l) / 100;
+ const f = n => {
+   const k = (n + h / 30) % 12;
+   const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+   return Math.round(255 * color).toString(16).padStart(2, '0');
+ };
+ return `#${f(0)}${f(8)}${f(4)}`;
+}
+
 export default {
 	range,
 	getPx,
 	sleep,
 	os,
-	sys,
+	sys,
 	getWindowInfo,
 	random,
 	guid,
@@ -762,5 +849,5 @@ export default {
 	page,
 	pages,
 	getValueByPath,
-	// setConfig
+	genLightColor
 }

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-	"version": "3.4.4",
+	"version": "3.4.5",
 	"description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",