uview-plus 3.4.19 → 3.4.22

package/changelog.md

@@ -1,3 +1,29 @@
+## 3.4.22（2025-04-22）
+fix: 修复自动上传偶发的success被覆盖为uploading
+
+fix: float-button缺少key #677
+
+fix: upload组件完善优化(感谢@semdy)
+
+fix: toolbar组件confirmColor属性默认改为空，以便默认使用主题色、标题字体加粗(感谢@semdy)
+
+## 3.4.21（2025-04-21）
+feat: subsection分段器支持双向绑定current
+
+feat: select组件支持maxHeight属性
+
+feat: datetime-picker支持inputBorder属性
+
+## 3.4.20（2025-04-17）
+fix: 修复navbar-mini提示border不存在
+
+feat: status-bar支持对外暴露状态栏高度值
+
+feat: upload支持自定义自动上传后处理逻辑便于对接不同规范后端
+
+feat: 优化tag组件插槽
+
+
 ## 3.4.19（2025-04-14）
 fix: 修复model组件增加contentStyle带来的语法问题
 

package/components/u-datetime-picker/props.js

@@ -5,7 +5,11 @@ export const props = defineMixin({
         // 是否显示input
         hasInput: {
             type: Boolean,
-            default: () => false
+            default: false
+        },
+        inputBorder: {
+            type: String,
+            default: 'surround'
         },
 		disabled: {
             type: Boolean,

package/components/u-datetime-picker/u-datetime-picker.vue

@@ -7,7 +7,7 @@
 				<up-input
 					:placeholder="placeholder"
 					:readonly="!!showByClickInput"
-					border="surround"
+					:border="inputBorder"
 					v-model="inputValue"
 					:disabled="disabled"
 					:disabledColor="disabledColor"

package/components/u-float-button/u-float-button.vue

@@ -25,7 +25,7 @@
                 bottom: height
             }">
                 <slot name="list">
-                    <template v-for="item in list">
+                    <template :key="index" v-for="(item, index) in list">
                         <view class="u-float-button__item" :style="{
                             backgroundColor: item?.backgroundColor ? item?.backgroundColor : backgroundColor,
                             color: item?.color ? item?.color : color,

package/components/u-navbar-mini/u-navbar-mini.vue

@@ -6,7 +6,6 @@
 			></u-status-bar>
 			<view
 				class="u-navbar-mini__content"
-				:class="[border && 'u-border-bottom']"
 				:style="{
 					height: addUnit(height),
 					backgroundColor: bgColor,

package/components/u-select/u-select.vue

@@ -22,9 +22,10 @@
 				:duration="duration + 50"
 				:customStyle="overlayStyle"
 				:opacity="overlayOpacity"
+				@touchmove.stop.prevent="noop"
 			></u-overlay>
 			<view class="u-select__options__wrap"
-				:style="{ zIndex: zIndex + 1, left: optionsWrapLeft, right: optionsWrapRight }">
+				:style="{ overflowY: 'auto', zIndex: zIndex + 1, left: optionsWrapLeft, right: optionsWrapRight, maxHeight: maxHeight}">
 				<view class="u-select__options" v-if="isOpen">
 					<slot name="options">
 						<view class="u-select__options_item"
@@ -50,6 +51,10 @@ export default {
 	name:"up-select",
 	emits: ['update:current', 'select'],
 	props: {
+		maxHeight: {
+			type: String,
+			default: '90vh'
+		},
 		overlay: {
 			type: Boolean,
 			default: true

package/components/u-status-bar/props.js

@@ -5,6 +5,11 @@ export const props = defineMixin({
         bgColor: {
             type: String,
             default: () => defProps.statusBar.bgColor
-        }
+        },
+		// 状态栏获取得高度
+		height: {
+			type: Number,
+			default: () => defProps.statusBar.height
+		}
     }
 })

package/components/u-status-bar/statusBar.js

@@ -10,6 +10,7 @@
 export default {
     // statusBar
     statusBar: {
-        bgColor: 'transparent'
+        bgColor: 'transparent',
+		height: 0
     }
 }

package/components/u-status-bar/u-status-bar.vue

@@ -34,11 +34,13 @@
 			this.isH5 = true
 			// #endif
 		},
+		emits: ['update:height'],
 		computed: {
 			style() {
 				const style = {}
 				// 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
 				let sheight = getWindowInfo().statusBarHeight
+				this.$emit('update:height', sheight)
 				if (sheight == 0) {
 					this.isH5 = true
 				} else {

package/components/u-subsection/u-subsection.vue

@@ -189,7 +189,7 @@ export default {
     beforeUnmount() {
         uni.offWindowResize(this.windowResizeCallback)
     },
-	emits: ["change"],
+	emits: ["change", "update:current"],
     methods: {
         addStyle,
         init() {
@@ -217,7 +217,8 @@ export default {
             // #endif
         },
         clickHandler(index) {
-            this.innerCurrent = index
+            this.innerCurrent = index;
+			this.$emit('update:current', index);
             this.$emit("change", index);
         },
     },

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

@@ -32,15 +32,29 @@
 						></u-icon>
 					</view>
 				</slot>
-				<text
-					class="u-tag__text"
-					:style="[textColor]"
-					:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
-				>
-					<slot>
-						{{ text }}
+				<view class="u-tag__content">
+					<slot name="content">
 					</slot>
-				</text>
+					<template v-if="!$slots.content">
+						<text
+							v-if="!$slots.default && !$slots.$default"
+							class="u-tag__text"
+							:style="[textColor]"
+							:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
+						>
+							{{ text }}
+						</text>
+						<text
+							v-else
+							class="u-tag__text"
+							:style="[textColor]"
+							:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
+						>
+							<slot>
+							</slot>
+						</text>
+					</template>
+				</view>
 			</view>
 			<view
 				class="u-tag__close"

package/components/u-toolbar/toolbar.js

@@ -14,7 +14,7 @@ export default {
         cancelText: '取消',
         confirmText: '确认',
         cancelColor: '#909193',
-        confirmColor: '#3c9cff',
+        confirmColor: '',
         title: ''
     }
 

package/components/u-toolbar/u-toolbar.vue

@@ -106,6 +106,7 @@
 			color: $u-main-color;
 			padding: 0 60rpx;
 			font-size: 16px;
+			font-weight: bold;
 			flex: 1;
 			text-align: center;
 		}

package/components/u-upload/props.js

@@ -163,5 +163,10 @@ export const props = defineMixin({
 		    type: Boolean,
 		    default: () => defProps.upload.getVideoThumb
 		},
+        // 自定义自动上传后处理
+        customAfterAutoUpload: {
+		    type: Boolean,
+		    default: () => defProps.upload.customAfterAutoUpload
+		},
     }
 })

package/components/u-upload/u-upload.vue

@@ -39,7 +39,7 @@
 							v-else
 						    color="#80CBF9"
 						    size="26"
-						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
+						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'file-text'"
 						></u-icon>
 						<view v-if="item.status === 'success'"
 							class="u-upload__wrap__play"
@@ -54,6 +54,10 @@
 					    v-else
 					    class="u-upload__wrap__preview__other"
 						@tap="onClickPreview(item, index)"
+						:style="[{
+							width: addUnit(width),
+							height: addUnit(height)
+						}]"
 					>
 						<u-icon
 						    color="#80CBF9"
@@ -61,7 +65,7 @@
 						    :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
 						></u-icon>
 						<text class="u-upload__wrap__preview__other__text">
-							{{item.isVideo || (item.type && item.type === 'video') ? '视频' : '文件'}}
+							{{item.isVideo || (item.type && item.type === 'video') ? item.name || '视频' : item.name || '文件'}}
 						</text>
 					</view>
 					<view
@@ -78,7 +82,6 @@
 							<u-loading-icon
 							    size="22"
 							    mode="circle"
-							    color="#ffffff"
 							    v-else
 							/>
 						</view>
@@ -263,7 +266,7 @@
 			}
 		},
 		// #ifdef VUE3
-		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList'],
+		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
 		// #endif
 		methods: {
 			addUnit,
@@ -327,18 +330,19 @@
 				const {
 					fileList = [], maxCount
 				} = this;
-				const lists = fileList.map((item) =>
-					Object.assign(Object.assign({}, item), {
+				const lists = fileList.map((item) => {
+					const name = item.name || item.url || item.thumb
+					return Object.assign(Object.assign({}, item), {
 						// 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理
-						isImage: this.accept === 'image' || test.image(item.url || item.thumb),
-						isVideo: this.accept === 'video' || test.video(item.url || item.thumb),
-						deletable: typeof(item.deletable) === 'boolean' ? item.deletable : this.deletable,
+						isImage: name ? test.image(name) : (this.accept === 'image' || test.image(name)),
+						isVideo: name ? test.video(name) : (this.accept === 'video' || test.video(name)),
+						deletable: typeof item.deletable === 'boolean' ? item.deletable : this.deletable,
 					})
-				);
+				});
 				this.lists = lists
 				this.isInCount = lists.length < maxCount
 			},
-			chooseFile() {
+			chooseFile(params) {
 				const {
 					maxCount,
 					multiple,
@@ -358,13 +362,14 @@
 							accept: this.accept,
 							extension: this.extension,
 							multiple: this.multiple,
-							capture: capture,
+							capture: this.capture,
 							compressed: this.compressed,
 							maxDuration: this.maxDuration,
 							sizeType: this.sizeType,
 							camera: this.camera,
 						}, {
 							maxCount: maxCount - lists.length,
+							...params
 						})
 					)
 					.then((res) => {
@@ -406,7 +411,7 @@
 				if (test.promise(res)) {
 					res.then((data) => this.onAfterRead(data || file));
 				} else {
-					this.onAfterRead(file);
+					this.onAfterRead(res);
 				}
 			},
 			getDetail(index) {
@@ -491,12 +496,29 @@
 									// header: header,
 									formData: formData,
 									success: (uploadFileRes) => {
-										result = res0.data.params.host + '/' + res0.data.params.key;
 										let thumb = '';
-										if (this.accept === 'video' || test.video(result)) {
-											thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast';
+										let afterPromise = '';
+										if (that.customAfterAutoUpload) {
+											afterPromise = new Promise((resolve, reject) => {
+												that.$emit(
+													'afterAutoUpload',
+													Object.assign(res0, {
+														callback: (r) => {
+															r.url ? resolve(r) : reject();
+														},
+													})
+												);
+											});
+										}
+										if (test.promise(afterPromise)) {
+											afterPromise.then((data) => that.succcessUpload(len + j, data.url, data.thumb));
+										} else {
+											result = res0.data.params.host + '/' + res0.data.params.key;
+											if (that.accept === 'video' || test.video(result)) {
+												thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast';
+											}
+											that.succcessUpload(len + j, result, thumb);
 										}
-										that.succcessUpload(len + j, result, thumb);
 									}
 								});
 								uploadTask.onProgressUpdate((res) => {
@@ -517,9 +539,33 @@
 									name: 'file',
 									// fileType: 'video', // 仅支付宝小程序，且必填。
 									header: this.autoUploadHeader,
-									success: (r) => {
-										result = res0.data.params.host + '/' + res0.data.params.key;
-										that.succcessUpload(len + j, result);
+									success: (uploadFileRes) => {
+										let res0 = uploadFileRes.data;
+										let afterPromise = '';
+										if (that.customAfterAutoUpload) {
+											afterPromise = new Promise((resolve, reject) => {
+												that.$emit(
+													'afterAutoUpload',
+													Object.assign(res0, {
+														callback: (r) => {
+															r.url ? resolve(r) : reject();
+														}
+													})
+												);
+											});
+										}
+										if (test.promise(afterPromise)) {
+											afterPromise.then((data) => that.succcessUpload(len + j, data.url));
+										} else {
+											if (res0.code != 200) {
+												uni.showToast({
+													title: res0.msg
+												});
+											} else {
+												result = res0.data.url;
+												that.succcessUpload(len + j, result);
+											}
+										}
 									}
 								});
 								uploadTask.onProgressUpdate((res) => {
@@ -546,7 +592,8 @@
 				let item = this.fileList[index];
 				this.fileList.splice(index, 1, {
 					...item,
-					status: 'uploading',
+					// 注意这里不判断会出现succcessUpload先执行又被覆盖的问题
+					status: param.progress == 100 ? 'success' : 'uploading',
 					message: '',
 					progress: param.progress
 				});

package/components/u-upload/upload.js

@@ -39,6 +39,7 @@ export default {
 		autoUploadAuthUrl: '',
 		autoUploadDriver: '',
 		autoUploadHeader: {},
-		getVideoThumb: false
+		getVideoThumb: false,
+		customAfterAutoUpload: false
 	}
 }

package/components/u-upload/utils.js

@@ -89,6 +89,11 @@ export function chooseFile({
     maxCount,
     extension
 }) {
+    try {
+        capture = test.array(capture) ? capture : capture.split(',');
+    } catch(e) {
+        capture = [];
+    }
     return new Promise((resolve, reject) => {
         switch (accept) {
         case 'image':

package/index.js

@@ -84,7 +84,15 @@ export const mount$u = function() {
     uni.$u = $u
 }
 
-// #ifdef H5
+function toCamelCase(str) {
+    return str.replace(/-([a-z])/g, function(match, group1) {
+      return group1.toUpperCase();
+    }).replace(/^[a-z]/, function(match) {
+      return match.toUpperCase();
+    });
+}
+
+// #ifdef APP || H5
 const importFn = import.meta.glob('./components/u-*/u-*.vue', { eager: true })
 let components = [];
 
@@ -102,18 +110,13 @@ for (const key in importFn) {
 }
 // #endif
 
-function toCamelCase(str) {
-    return str.replace(/-([a-z])/g, function(match, group1) {
-      return group1.toUpperCase();
-    }).replace(/^[a-z]/, function(match) {
-      return match.toUpperCase();
-    });
-}
-
 const install = (Vue, upuiParams = '') => {
-    // #ifdef H5
+    // #ifdef APP || H5
     components.forEach(function(component) {
         const name = component.name.replace(/u-([a-zA-Z0-9-_]+)/g, 'up-$1');
+		if (name != component.name) {
+			Vue.component(component.name, component); 
+		}
         Vue.component(name, component); 
     });
     // #endif

package/package.json

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