uview-plus 3.8.49 → 3.8.86

package/components/u-transition/transitionMixin.js

@@ -1,163 +1,164 @@
-// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
-const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
-// nvue动画模块实现细节抽离在外部文件
-// #ifdef APP-NVUE
-import animationMap from './nvue-ani-map.js'
-// #endif
-
-// #ifndef APP-NVUE
-// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
-const getClassNames = (name) => ({
-    enter: `u-${name}-enter u-${name}-enter-active`,
-    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
-    leave: `u-${name}-leave u-${name}-leave-active`,
-    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
-})
-// #endif
-
-// #ifdef APP-NVUE
-// 引入nvue(weex)的animation动画模块，文档见：
-// https://weex.apache.org/zh/docs/modules/animation.html#transition
-const animation = uni.requireNativePlugin('animation')
-const getStyle = (name) => animationMap[name]
-// #endif
-
-import { nextTick } from 'vue'
-import { sleep } from '../../libs/function/index';
-export default {
-    methods: {
-        // 组件被点击发出事件
-        clickHandler() {
-            this.$emit('click')
-        },
-        // #ifndef APP-NVUE
-        // vue版本的组件进场处理
-        async vueEnter() {
-            // 动画进入时的类名
-            const classNames = getClassNames(this.mode)
-            // 定义状态和发出动画进入前事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            this.inited = true
-            this.display = true
-            this.classes = classNames.enter
-			await nextTick();
-			{
-                // https://github.com/umicro/uView2.0/issues/545
-				await sleep(20)
-                // 标识动画尚未结束
-                this.$emit('enter')
-                this.transitionEnded = false
-				// 组件动画进入后触发的事件
-                this.$emit('afterEnter')
-                // 赋予组件enter-to类名
-                this.classes = classNames['enter-to']
-            }
-        },
-        // 动画离场处理
-        async vueLeave() {
-            // 如果不是展示状态，无需执行逻辑
-            if (!this.display) return
-            const classNames = getClassNames(this.mode)
-            // 标记离开状态和发出事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 获得类名
-            this.classes = classNames.leave
-
-            await nextTick();
-			{
-               // 动画正在离场的状态
-               this.transitionEnded = false
-               this.$emit('leave')
-                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-                setTimeout(this.onTransitionEnd, this.duration)
-                this.classes = classNames['leave-to']
-            }
-        },
-        // #endif
-        // #ifdef APP-NVUE
-        // nvue版本动画进场
-        async nvueEnter() {
-            // 获得样式的名称
-            const currentStyle = getStyle(this.mode)
-            // 组件动画状态和发出事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            // 展示生成组件元素
-            this.inited = true
-            this.display = true
-            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
-            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
-            this.viewStyle = {
-                opacity: 0
-            }
-            // 等待弹窗内容渲染完成
-            await nextTick();
-			{
-                // 合并样式
-                this.viewStyle = currentStyle.enter
-                Promise.resolve()
-                    .then(waitTick)
-                    .then(() => {
-                        // 组件开始进入前的事件
-                        this.$emit('enter')
-                        // nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
-                        animation.transition(this.$refs['u-transition'].ref, {
-                            styles: currentStyle['enter-to'],
-                            duration: this.duration,
-                            timingFunction: this.timingFunction,
-                            needLayout: false,
-                            delay: 0
-                        }, () => {
-                            // 动画执行完毕，发出事件
-                            this.$emit('afterEnter')
-                        })
-                    })
-                    .catch(() => {})
-            }
-        },
-        nvueLeave() {
-            if (!this.display) {
-                return
-            }
-            const currentStyle = getStyle(this.mode)
-            // 定义状态和事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 合并样式
-            this.viewStyle = currentStyle.leave
-            // 放到promise中处理执行过程
-            Promise.resolve()
-                .then(waitTick) // 等待几十ms
-                .then(() => {
-                    this.transitionEnded = false
-                    // 动画正在离场的状态
-                    this.$emit('leave')
-                    animation.transition(this.$refs['u-transition'].ref, {
-                        styles: currentStyle['leave-to'],
-                        duration: this.duration,
-                        timingFunction: this.timingFunction,
-                        needLayout: false,
-                        delay: 0
-                    }, () => {
-                        this.onTransitionEnd()
-                    })
-                })
-                .catch(() => {})
-        },
-        // #endif
-        // 完成过渡后触发
-        onTransitionEnd() {
-            // 如果已经是结束的状态，无需再处理
-            if (this.transitionEnded) return
-            this.transitionEnded = true
-            // 发出组件动画执行后的事件
-            this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
-            if (!this.show && this.display) {
-                this.display = false
-                this.inited = false
-            }
-        }
-    }
-}
+// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
+const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+// nvue动画模块实现细节抽离在外部文件
+// #ifdef APP-NVUE
+import animationMap from './nvue-ani-map.js'
+// #endif
+
+// #ifndef APP-NVUE
+// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
+const getClassNames = (name) => ({
+    enter: `u-${name}-enter u-${name}-enter-active`,
+    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
+    leave: `u-${name}-leave u-${name}-leave-active`,
+    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
+})
+// #endif
+
+// #ifdef APP-NVUE
+// 引入nvue(weex)的animation动画模块，文档见：
+// https://weex.apache.org/zh/docs/modules/animation.html#transition
+const animation = uni.requireNativePlugin('animation')
+const getStyle = (name) => animationMap[name]
+// #endif
+
+import { nextTick } from 'vue'
+import { sleep } from '../../libs/function/index';
+export default {
+    methods: {
+        // 组件被点击发出事件
+        clickHandler() {
+            this.$emit('click')
+        },
+        // #ifndef APP-NVUE
+        // vue版本的组件进场处理
+        async vueEnter() {
+            // 动画进入时的类名
+            const classNames = getClassNames(this.mode)
+            // 定义状态和发出动画进入前事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            this.inited = true
+            this.display = true
+            this.classes = classNames.enter
+			await nextTick();
+			{
+                // https://github.com/umicro/uView2.0/issues/545
+				await sleep(20)
+                // 标识动画尚未结束
+                this.$emit('enter')
+                this.transitionEnded = false
+				// 组件动画进入后触发的事件
+                this.$emit('afterEnter')
+                // 赋予组件enter-to类名
+                this.classes = classNames['enter-to']
+            }
+        },
+        // 动画离场处理
+        async vueLeave() {
+            // 如果不是展示状态，无需执行逻辑
+            if (!this.display) return
+            const classNames = getClassNames(this.mode)
+            // 标记离开状态和发出事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 获得类名
+            this.classes = classNames.leave
+
+            await nextTick();
+			{
+               // 动画正在离场的状态
+               this.transitionEnded = false
+               this.$emit('leave')
+                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+                setTimeout(this.onTransitionEnd, this.duration)
+                this.classes = classNames['leave-to']
+            }
+        },
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue版本动画进场
+        async nvueEnter() {
+            // 获得样式的名称
+            const currentStyle = getStyle(this.mode) || getStyle('none')
+            // 组件动画状态和发出事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            // 展示生成组件元素
+            this.inited = true
+            this.display = true
+            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
+            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
+            // none 模式为页面内常驻展示，不需要预置透明
+            this.viewStyle = this.mode === 'none' ? { opacity: 1 } : {
+                opacity: 0
+            }
+            // 等待弹窗内容渲染完成
+            await nextTick();
+			{
+                // 合并样式
+                this.viewStyle = currentStyle.enter
+                Promise.resolve()
+                    .then(waitTick)
+                    .then(() => {
+                        // 组件开始进入前的事件
+                        this.$emit('enter')
+                        // nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
+                        animation.transition(this.$refs['u-transition'].ref, {
+                            styles: currentStyle['enter-to'],
+                            duration: this.mode === 'none' ? 0 : this.duration,
+                            timingFunction: this.timingFunction,
+                            needLayout: false,
+                            delay: 0
+                        }, () => {
+                            // 动画执行完毕，发出事件
+                            this.$emit('afterEnter')
+                        })
+                    })
+                    .catch(() => {})
+            }
+        },
+        nvueLeave() {
+            if (!this.display) {
+                return
+            }
+            const currentStyle = getStyle(this.mode) || getStyle('none')
+            // 定义状态和事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 合并样式
+            this.viewStyle = currentStyle.leave
+            // 放到promise中处理执行过程
+            Promise.resolve()
+                .then(waitTick) // 等待几十ms
+                .then(() => {
+                    this.transitionEnded = false
+                    // 动画正在离场的状态
+                    this.$emit('leave')
+                    animation.transition(this.$refs['u-transition'].ref, {
+                        styles: currentStyle['leave-to'],
+                        duration: this.mode === 'none' ? 0 : this.duration,
+                        timingFunction: this.timingFunction,
+                        needLayout: false,
+                        delay: 0
+                    }, () => {
+                        this.onTransitionEnd()
+                    })
+                })
+                .catch(() => {})
+        },
+        // #endif
+        // 完成过渡后触发
+        onTransitionEnd() {
+            // 如果已经是结束的状态，无需再处理
+            if (this.transitionEnded) return
+            this.transitionEnded = true
+            // 发出组件动画执行后的事件
+            this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
+            if (!this.show && this.display) {
+                this.display = false
+                this.inited = false
+            }
+        }
+    }
+}

package/components/u-upload/props.js

@@ -1,5 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import UploadDefaultProps from './upload'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(UploadDefaultProps)
 export const props = defineMixin({
     props: {
         // 接受的文件类型, 可选值为all media image file video

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

@@ -141,8 +141,14 @@
 					</slot>
 				</view>
 			</template>
-			<canvas id="myCanvas" type="2d"
-				style="width: 100px; height: 150px;display: none;"></canvas>
+			<up-canvas
+				ref="videoThumbCanvas"
+				class="u-upload__hidden-canvas"
+				:canvas-id="videoThumbCanvasId"
+				:width="videoThumbCanvasWidth"
+				:height="videoThumbCanvasHeight"
+				bg-color="transparent"
+			></up-canvas>
 			<template v-if="isInCount">
 				<view
 				    v-if="$slots.trigger"
@@ -257,7 +263,10 @@
 				lists: [],
 				isInCount: true,
 				popupShow: false,
-				currentItemIndex: -1
+				currentItemIndex: -1,
+				videoThumbCanvasId: 'u-upload-video-thumb-' + Math.random().toString(36).substr(2, 9),
+				videoThumbCanvasWidth: 100,
+				videoThumbCanvasHeight: 150
 			}
 		},
 		watch: {
@@ -314,47 +323,37 @@
 					return;
 				}
 				// 截取第一帧作为封面，oss等云存储场景直接使用拼接参数。
-				let w = this.lists[this.currentItemIndex].width;
-				let h = this.lists[this.currentItemIndex].height;
+				const w = this.lists[this.currentItemIndex].width;
+				const h = this.lists[this.currentItemIndex].height;
 				const dpr = uni.getSystemInfoSync().pixelRatio;
 				uni.createSelectorQuery().select('#myVideo').context(res => {
 					console.log('select video', res)
 					const myVideo = res.context
-					uni.createSelectorQuery()
-					  .select('#myCanvas')
-					  .fields({ node: true, size: true })
-					  .exec(([res]) => {
-						console.log('select canvas', res)
-						const ctx1 = res[0].node.getContext('2d')
-						res[0].node.width = w * dpr
-						res[0].node.height = h * dpr
-						// Draw the first frame and export it as an image
-						// myVideo.onPlay(() => {
-							setTimeout(() => {
-								captureFirstFrame()
-							}, 500)
-						// })
-						const captureFirstFrame = () => {
-							ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr)
-							wx.canvasToTempFilePath({
-								canvas: res[0].node,
-								success: (result) => {
-									console.log('First frame image path:', result
-										.tempFilePath)
-									// Now you can use the image path (result.tempFilePath)
-									this.fileList['currentItemIndex'].thumb = result.tempFilePath
-								},
-								fail: (err) => {
-									console.error('Failed to export image:', err)
-								}
-							})
-						}
-
-						// Capture the first frame
-						setInterval(() => {
-							ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr);
-						}, 1000 / 24)
-					}).exec()
+					this.videoThumbCanvasWidth = w
+					this.videoThumbCanvasHeight = h
+					this.$nextTick(async () => {
+						const canvas = this.$refs.videoThumbCanvas
+						if (!canvas || !myVideo) return
+						await canvas.initCanvas(true)
+						const ctx1 = canvas.getRawContext()
+						if (!ctx1) return
+						setTimeout(async () => {
+							try {
+								ctx1.drawImage(myVideo, 0, 0, w, h)
+								const result = await canvas.toTempFilePath({
+									width: w,
+									height: h,
+									destWidth: w * dpr,
+									destHeight: h * dpr
+								})
+								console.log('First frame image path:', result.tempFilePath)
+								this.fileList[this.currentItemIndex].thumb = result.tempFilePath
+								this.$emit('update:fileList', this.fileList)
+							} catch (err) {
+								console.error('Failed to export image:', err)
+							}
+						}, 500)
+					})
 				}).exec()
 			},
 			formatFileList() {
@@ -822,6 +821,14 @@
 				}
 			}
 		}
+
+		&__hidden-canvas {
+			position: fixed;
+			top: -10000px;
+			left: -10000px;
+			z-index: -1;
+		}
+
 		&__wrap__play {
 			position: absolute;
 			top: 0px;

package/components/u-waterfall/u-waterfall.vue

@@ -247,59 +247,58 @@
                 
                 // 分配新数据到最短的列
                 for (let item of newData) {
-                    const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
-                    // console.log('this.columnList', this.columnList)
-                    this.columnList[minHeightIndex].push(item);
-                    
-                    // 获取实际渲染后的元素高度而不是估算
-                    await sleep(this.addTime)
-                    await this.$nextTick(async () => {
-                        try {
-                            const rect = await this.$uGetRect(`#u-column-${minHeightIndex}`);
-                            // console.log(`#u-column-${minHeightIndex}`, rect.height)
-                            if (rect.height) {
-                                columnHeights[minHeightIndex] = rect.height;
-                                // 加载一个后置事件
-                                this.$emit('after-add-one', {
-                                    ...item,
-                                    height: rect.height
-                                });
-                            }
-                        } catch (e) {
-                            // console.log(e)
-                            // columnHeights[i] = 0;
-                        }
-                    });
-                    // this.$nextTick(async () => {
-                    //     try {
-                    //         // 等待DOM更新后获取实际高度
-                    //         const lastIndex = this.columnList[minHeightIndex].length - 1;
-                    //         const el = this.$refs[`u-column-${minHeightIndex}`][0].children[lastIndex];
-                    //         if (el) {
-                    //             const rect = await this.$uGetRect(el);
-                    //             const actualHeight = rect.height || 100;
-                    //             columnHeights[minHeightIndex] += actualHeight;
-                    //         } else {
-                    //             // 备用方案：如果无法获取实际高度，则使用默认值
-                    //             columnHeights[minHeightIndex] += 100;
-                    //         }
-                    //     } catch (e) {
-                    //         // 出错时使用默认高度
-                    //         console.log(e)
-                    //         columnHeights[minHeightIndex] += 100;
-                    //     }
-                    // });
-                }
+                    const minHeightIndex = this.getMinHeightColumnIndex(columnHeights);
+                    // console.log('this.columnList', this.columnList)
+                    this.columnList[minHeightIndex].push(item);
+
+                    // 获取实际渲染后的元素高度而不是估算
+                    await sleep(this.addTime);
+                    await this.$nextTick();
+                    try {
+                        const rect = await this.$uGetRect(`#u-column-${minHeightIndex}`);
+                        // console.log(`#u-column-${minHeightIndex}`, rect.height)
+                        if (rect.height) {
+                            columnHeights[minHeightIndex] = rect.height;
+                            // 加载一个后置事件
+                            this.$emit('after-add-one', {
+                                ...item,
+                                height: rect.height
+                            });
+                        }
+                    } catch (e) {
+                        // console.log(e)
+                        // columnHeights[i] = 0;
+                    }
+                }
                 // 加载所有后置事件
                 this.$emit('after-add-all', {
                     columnHeights: columnHeights,
-                    newData: newData
-                });
-            },
-
-            // 复制而不是引用对象和数组
-            cloneData(data) {
-                return JSON.parse(JSON.stringify(data));
+                    newData: newData
+                });
+            },
+
+            // 获取最短列；高度相同或暂不可测时按列数据量打散，避免全部落到第一列
+            getMinHeightColumnIndex(columnHeights) {
+                let minIndex = 0;
+                for (let i = 1; i < columnHeights.length; i++) {
+                    const currentHeight = Number(columnHeights[i]) || 0;
+                    const minHeight = Number(columnHeights[minIndex]) || 0;
+                    if (currentHeight < minHeight) {
+                        minIndex = i;
+                    } else if (currentHeight === minHeight) {
+                        const currentLength = this.columnList[i] ? this.columnList[i].length : 0;
+                        const minLength = this.columnList[minIndex] ? this.columnList[minIndex].length : 0;
+                        if (currentLength < minLength) {
+                            minIndex = i;
+                        }
+                    }
+                }
+                return minIndex;
+            },
+
+            // 复制而不是引用对象和数组
+            cloneData(data) {
+                return JSON.parse(JSON.stringify(data));
             },
             
             // 清空数据列表
@@ -413,4 +412,4 @@
         max-width: 100%;
         /* #endif */
     }
-</style>
+</style>