uview-plus 3.8.55 → 3.8.106

package/components/u-transition/nvue-ani-map.js

@@ -1,68 +1,75 @@
-export default {
-    fade: {
-        enter: { opacity: 0 },
-        'enter-to': { opacity: 1 },
-        leave: { opacity: 1 },
-        'leave-to': { opacity: 0 }
-    },
-    'fade-up': {
-        enter: { opacity: 0, transform: 'translateY(100%)' },
-        'enter-to': { opacity: 1, transform: 'translateY(0)' },
-        leave: { opacity: 1, transform: 'translateY(0)' },
-        'leave-to': { opacity: 0, transform: 'translateY(100%)' }
-    },
-    'fade-down': {
-        enter: { opacity: 0, transform: 'translateY(-100%)' },
-        'enter-to': { opacity: 1, transform: 'translateY(0)' },
-        leave: { opacity: 1, transform: 'translateY(0)' },
-        'leave-to': { opacity: 0, transform: 'translateY(-100%)' }
-    },
-    'fade-left': {
-        enter: { opacity: 0, transform: 'translateX(-100%)' },
-        'enter-to': { opacity: 1, transform: 'translateY(0)' },
-        leave: { opacity: 1, transform: 'translateY(0)' },
-        'leave-to': { opacity: 0, transform: 'translateX(-100%)' }
-    },
-    'fade-right': {
-        enter: { opacity: 0, transform: 'translateX(100%)' },
-        'enter-to': { opacity: 1, transform: 'translateY(0)' },
-        leave: { opacity: 1, transform: 'translateY(0)' },
-        'leave-to': { opacity: 0, transform: 'translateX(100%)' }
-    },
-    'slide-up': {
-        enter: { transform: 'translateY(100%)' },
-        'enter-to': { transform: 'translateY(0)' },
-        leave: { transform: 'translateY(0)' },
-        'leave-to': { transform: 'translateY(100%)' }
-    },
-    'slide-down': {
-        enter: { transform: 'translateY(-100%)' },
-        'enter-to': { transform: 'translateY(0)' },
-        leave: { transform: 'translateY(0)' },
-        'leave-to': { transform: 'translateY(-100%)' }
-    },
-    'slide-left': {
-        enter: { transform: 'translateX(-100%)' },
-        'enter-to': { transform: 'translateY(0)' },
-        leave: { transform: 'translateY(0)' },
-        'leave-to': { transform: 'translateX(-100%)' }
-    },
-    'slide-right': {
-        enter: { transform: 'translateX(100%)' },
-        'enter-to': { transform: 'translateY(0)' },
-        leave: { transform: 'translateY(0)' },
-        'leave-to': { transform: 'translateX(100%)' }
-    },
-    zoom: {
-        enter: { transform: 'scale(0.95)' },
-        'enter-to': { transform: 'scale(1)' },
-        leave: { transform: 'scale(1)' },
-        'leave-to': { transform: 'scale(0.95)' }
-    },
-    'fade-zoom': {
-        enter: { opacity: 0, transform: 'scale(0.95)' },
-        'enter-to': { opacity: 1, transform: 'scale(1)' },
-        leave: { opacity: 1, transform: 'scale(1)' },
-        'leave-to': { opacity: 0, transform: 'scale(0.95)' }
-    }
-}
+export default {
+    // 无动画模式：直接显示/隐藏，供 pageInline 等常驻场景使用
+    none: {
+        enter: { opacity: 1 },
+        'enter-to': { opacity: 1 },
+        leave: { opacity: 1 },
+        'leave-to': { opacity: 0 }
+    },
+    fade: {
+        enter: { opacity: 0 },
+        'enter-to': { opacity: 1 },
+        leave: { opacity: 1 },
+        'leave-to': { opacity: 0 }
+    },
+    'fade-up': {
+        enter: { opacity: 0, transform: 'translateY(100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateY(100%)' }
+    },
+    'fade-down': {
+        enter: { opacity: 0, transform: 'translateY(-100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateY(-100%)' }
+    },
+    'fade-left': {
+        enter: { opacity: 0, transform: 'translateX(-100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateX(-100%)' }
+    },
+    'fade-right': {
+        enter: { opacity: 0, transform: 'translateX(100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateX(100%)' }
+    },
+    'slide-up': {
+        enter: { transform: 'translateY(100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateY(100%)' }
+    },
+    'slide-down': {
+        enter: { transform: 'translateY(-100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateY(-100%)' }
+    },
+    'slide-left': {
+        enter: { transform: 'translateX(-100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateX(-100%)' }
+    },
+    'slide-right': {
+        enter: { transform: 'translateX(100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateX(100%)' }
+    },
+    zoom: {
+        enter: { transform: 'scale(0.95)' },
+        'enter-to': { transform: 'scale(1)' },
+        leave: { transform: 'scale(1)' },
+        'leave-to': { transform: 'scale(0.95)' }
+    },
+    'fade-zoom': {
+        enter: { opacity: 0, transform: 'scale(0.95)' },
+        'enter-to': { opacity: 1, transform: 'scale(1)' },
+        leave: { opacity: 1, transform: 'scale(1)' },
+        'leave-to': { opacity: 0, transform: 'scale(0.95)' }
+    }
+}

package/components/u-transition/props.js

@@ -1,5 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import TransitionDefaultProps from './transition'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(TransitionDefaultProps)
 export const props = defineMixin({
     props: {
         // 是否展示组件

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;
@@ -868,7 +875,7 @@
 			bottom: $u-upload-success-bottom;
 			right: $u-upload-success-right;
 			@include flex;
-			// 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形
+			// 由于weex(nvue)不支持css绘制三角形
 			// 所以在nvue下使用图片，非nvue下使用css实现
 			/* #ifndef APP-NVUE */
 			border-style: $u-upload-success-border-style;