uview-plus 3.7.0 → 3.7.13

package/changelog.md

@@ -1,3 +1,43 @@
+## 3.7.13（2026-02-07）
+add: 新增up-canvas组件
+
+## 3.7.12（2026-02-07）
+improvment: 优化签名组件兼容性修复微信小程序支持
+
+## 3.7.11（2026-02-06）
+add: action-sheet组件新增nameKey和subnameKey属性
+
+## 3.7.10（2026-02-06）
+add: checkbox-group组件的change事件增加第二个返回参数为当前触发变化的checkbox组件name信息等
+
+## 3.7.9（2026-02-06）
+fix: 修复align-self属性值缺少d导致样式不生效的问题
+
+## 3.7.8（2026-02-05）
+improvment: 优化card组件示例
+
+## 3.7.7（2026-02-05）
+add: select组件新增closeSelect方法用于自定义控制关闭
+
+
+## 3.7.6（2026-02-04）
+add: picker组件示例onLoad后加载数据
+
+## 3.7.5（2026-02-03）
+add: up-slider组件新增垂直模式
+
+## 3.7.4（2026-02-03）
+add: box组件props优化及新增leftIcon/leftTitle/rightTopIcon/rightTopTitle/rightBottomIcon/rightBottomTitle参数
+
+## 3.7.3（2026-02-03）
+improvment: city-locate组件示例改为组合式API
+
+## 3.7.2（2026-02-02）
+improvment: color-picker组件示例改为组合式API
+
+## 3.7.1（2026-02-02）
+fix:修复qrcode缺失的preview定义emit
+
 ## 3.7.0（2026-02-01）
 fix: 修复up-qrcode二维码在微信小程序报错
 

package/components/u-action-sheet/actionSheet.js

@@ -14,6 +14,8 @@ export default {
         title: '',
         description: '',
         actions: [],
+        nameKey: 'name',
+        subnameKey: 'subnameKey',
         index: '',
         cancelText: '',
         closeOnClickAction: true,

package/components/u-action-sheet/props.js

@@ -31,6 +31,16 @@ export const props = defineMixin({
             type: Array,
             default: () => defProps.actionSheet.actions
         },
+        // 选项名称key
+        nameKey: {
+            type: String,
+            default: () => defProps.actionSheet.nameKey
+        },
+        // 选项子名称key
+        subnameKey: {
+            type: String,
+            default: () => defProps.actionSheet.subnameKey
+        },
         // 取消按钮的文字，不为空时显示按钮
         cancelText: {
             type: String,

package/components/u-action-sheet/u-action-sheet.vue

@@ -71,11 +71,11 @@
 									<text
 									    class="u-action-sheet__item-wrap__item__name"
 									    :style="[itemStyle(index)]"
-									>{{ item.name }}</text>
+									>{{ item[nameKey] }}</text>
 									<text
-									    v-if="item.subname"
+									    v-if="item[subnameKey]"
 									    class="u-action-sheet__item-wrap__item__subname"
-									>{{ item.subname }}</text>
+									>{{ item[subnameKey] }}</text>
 								</template>
 								<!-- 加载状态图标 -->
 								<u-loading-icon

package/components/u-box/box.js

@@ -0,0 +1,24 @@
+/*
+ * @Author       : ly
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2026-02-02 23:54:58
+ * @LastAuthor   : ly
+ * @lastTime     : 2026-02-02 23:54:58
+ * @FilePath     : /uview-ultra/components/up-box/box.js
+ */
+export default {
+    // box 组件
+    box: {
+        bgColors: ['#EEFCFF', '#FCF8FF', '#FDF8F2'],
+        height: '160px',
+        borderRadius: '6px',
+        gap: '15px',
+        leftIcon: '',
+        leftTitle: '左',
+        rightTopIcon: '',
+        rightTopTitle: '右上',
+        rightBottomIcon: '',
+        rightBottomTitle: '右下'
+    }
+}

package/components/u-box/props.js

@@ -1,27 +1,57 @@
-import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import { defineMixin } from '../../libs/vue.js'
+import defProps from './box.js'
 
 export const propsBox = defineMixin({
     props: {
         // 背景色
         bgColors: {
             type: [Array],
-            default: ['#EEFCFF', '#FCF8FF', '#FDF8F2']
+            default: () => defProps.box.bgColors
         },
         // 高度
         height: {
             type: [String],
-            default: "160px"
+            default: () => defProps.box.height
         },
         // 圆角
         borderRadius: {
             type: [String],
-            default: "6px"
+            default: () => defProps.box.borderRadius
         },
         // 间隔
         gap: {
             type: [String],
-            default: "15px"
+            default: () => defProps.box.gap
+        },
+        // 左侧图标
+        leftIcon: {
+            type: [String],
+            default: () => defProps.box.leftIcon
+        },
+        // 左侧文案
+        leftTitle: {
+            type: [String],
+            default: () => defProps.box.leftTitle
+        },
+        // 右上图标
+        rightTopIcon: {
+            type: [String],
+            default: () => defProps.box.rightTopIcon
+        },
+        // 右上文案
+        rightTopTitle: {
+            type: [String],
+            default: () => defProps.box.rightTopTitle
+        },
+        // 右下图标
+        rightBottomIcon: {
+            type: [String],
+            default: () => defProps.box.rightBottomIcon
+        },
+        // 右下文案
+        rightBottomTitle: {
+            type: [String],
+            default: () => defProps.box.rightBottomTitle
         },
     }
-})
+})

package/components/u-box/u-box.vue

@@ -1,18 +1,33 @@
 <template>
-	<view class="u-box" :style="[{height: height}, addStyle(customStyle)]">
-        <view class="u-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
-            <slot name="left">左</slot>
-        </view>
-        <view class="u-box__gap" :style="{width: gap, height: height}"></view>
-        <view class="u-box__right">
-            <view class="u-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
-                <slot name="rightTop">右上</slot>
-            </view>
-            <view class="u-box__right-gap" :style="{height: gap}"></view>
-            <view class="u-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
-                <slot name="rightBottom">右下</slot>
-            </view>
-        </view>
+	<view class="u-box" :style="[{height: height}, addStyle(customStyle)]">
+	    <view class="u-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
+	        <slot name="left">
+	            <view class="flex flex-row items-center justify-center">
+	                <u-icon size="36" :name="leftIcon"></u-icon>
+	                <text class="ml-2 text-16px">{{leftTitle}}</text>
+	            </view>
+	        </slot>
+	    </view>
+	    <view class="u-box__gap" :style="{width: gap, height: height}"></view>
+	    <view class="u-box__right">
+	        <view class="u-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
+	            <slot name="rightTop">
+	                <view class="flex flex-row items-center justify-center">
+	                    <u-icon size="36" :name="rightTopIcon"></u-icon>
+	                    <text class="ml-2 text-15px">{{rightTopTitle}}</text>
+	                </view>
+	            </slot>
+	        </view>
+	        <view class="u-box__right-gap" :style="{height: gap}"></view>
+	        <view class="u-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
+	            <slot name="rightBottom">
+	                <view class="flex flex-row items-center justify-center">
+	                    <u-icon size="36" :name="rightBottomIcon"></u-icon>
+	                    <text class="ml-2 text-15px">{{rightBottomTitle}}</text>
+	                </view>
+	            </slot>
+	        </view>
+	    </view>
 	</view>
 </template>
 

package/components/u-canvas/u-canvas.vue

@@ -8,24 +8,34 @@
         <!-- #ifdef MP || H5 -->
         <canvas
             class="u-canvas__canvas"
-            :id="cid"
-            :canvas-id="cid"
+            :id="canvasId"
+            :canvas-id="canvasId"
             type="2d"
-            :style="{ width: sizeLocal + unit, height: sizeLocal + unit }" />
+            :style="{ width: width + unit, height: height + unit }"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"/>
         <!-- #endif -->
 
         <!-- #ifdef APP-PLUS -->
         <canvas
             class="u-canvas__canvas"
-            :id="cid"
-            :canvas-id="cid"
-            :style="{ width: width + unit, height: height + unit }" />
+            :id="canvasId"
+            :canvas-id="canvasId"
+            :style="{ width: width + unit, height: height + unit }" 
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"/>
         <!-- #endif -->
 
         <!-- #ifdef APP-NVUE -->
         <gcanvas class="u-canvas__canvas" ref="gcanvess"
-            :style="{ width: width + unit, height: height + unit }">
+            :style="{ width: width + unit, height: height + unit }"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd">
         </gcanvas>
+        <!-- #endif -->
     </view>
 </template>
 
@@ -38,15 +48,14 @@ import {
 	Image as GImage
 } from '../../libs/util/gcanvas/index.js';
 // #endif
-// 20260201不能在data中存储canvas，否则会导致在微信小程序getContext获取不到canvas对象报错Cannot read property 'type'
-let canvas = null
+let canvasNode = null;
 export default {
     name: "u-canvas",
     props: {
-        cid: {
+        canvasId: {
             type: String,
             default: () => {
-				return `u-qrcode-canvas${Math.floor(Math.random() * 1000000)}`
+				return `u-canvas${Math.floor(Math.random() * 1000000)}`
 			}
         },
         width: {
@@ -61,6 +70,15 @@ export default {
             type: String,
             default: 'px'
         },
+        useRootHeightAndWidth: {
+            type: Boolean,
+            default: false
+        },
+        // 背景色
+        bgColor: {
+            type: String,
+            default: '#ffffff'
+        }
     },
     data() {
         return {
@@ -69,9 +87,30 @@ export default {
             canvasContext: null,
             widthLocal: this.width,
             heightLocal: this.height,
+            ctx: null
         };
     },
+    computed: {
+        // 计算实际画布尺寸
+        actualWidth() {
+            return this.useRootHeightAndWidth ? this.widthLocal : Number(this.width);
+        },
+        actualHeight() {
+            return this.useRootHeightAndWidth ? this.heightLocal : Number(this.height);
+        }
+    },
     methods: {
+        // 添加触摸事件处理方法
+        onTouchStart(e) {
+            this.$emit('touchstart', e);
+        },
+        onTouchMove(e) {
+            this.$emit('touchmove', e);
+        },
+        onTouchEnd(e) {
+            this.$emit('touchend', e);
+        },
+
         /**
          * 获取节点
          * @param id 节点id
@@ -117,14 +156,237 @@ export default {
         		}
         	})
         },
-		getUPCanvasContext() {
-			// #ifdef APP-PLUS
-			return uni.createCanvasContext(this.cid, this);
-			// #endif
-			// #ifdef APP-PLUS-NVUE || MP || H5
-			return canvas.getContext('2d');
-			// #endif
-		},
+		
+        /**
+         * 获取Canvas上下文
+         */
+        getCanvasContext() {
+            // #ifdef APP-PLUS
+            return uni.createCanvasContext(this.canvasId, this);
+            // #endif
+            // #ifdef APP-PLUS-NVUE || MP || H5
+            return canvasNode.getContext('2d');
+            // #endif
+        },
+
+        /**
+         * 初始化Canvas
+         */
+        async initCanvas() {
+            try {
+                canvasNode = await this.getCanvasNode(this.canvasId);
+                
+                // #ifdef MP-WEIXIN
+                // 在微信小程序中，为了提高清晰度，需要考虑设备像素比
+                const dpr = uni.getSystemInfoSync().pixelRatio;
+                if(canvasNode) {
+                    // 设置canvas实际绘制尺寸为显示尺寸的dpr倍
+                    canvasNode.width = this.actualWidth * dpr;
+                    canvasNode.height = this.actualHeight * dpr;
+                }
+                // #endif
+                
+                this.ctx = this.getCanvasContext();
+                
+                // #ifdef MP-WEIXIN
+                if(this.ctx) {
+                    this.ctx.scale(dpr, dpr);
+                }
+                // #endif
+                
+                // 初始化背景，但不在微信小程序中调用draw
+                this.clearCanvas();
+            } catch (error) {
+                console.error("初始化Canvas失败:", error);
+            }
+        },
+
+        /**
+         * 清空画布
+         */
+        clearCanvas() {
+            if (!this.ctx) return;
+
+            this.clearRect(0, 0, this.actualWidth, this.actualHeight);
+
+            // 填充背景色
+            this.beginPath();
+            this.rect(0, 0, this.actualWidth, this.actualHeight);
+
+            this.setFillStyle(this.bgColor);
+            this.fill();
+            
+            this.draw();
+        },
+        rect(x, y, width, height) {
+            if (!this.ctx) return;
+            this.ctx.rect(x, y, width, height);
+        },
+        clearRect(x, y, width, height) {
+            if (!this.ctx) return;
+            this.ctx.clearRect(x, y, width, height);
+        },
+        fill() {
+            if (!this.ctx) return;
+            this.ctx.fill();
+        },
+        setFillStyle(color) {
+            if (!this.ctx) return;
+
+            // #ifndef APP-PLUS-NVUE
+            if (this.ctx.setFillStyle) {
+                this.ctx.setFillStyle(color);
+            } else {
+                this.ctx.fillStyle = color;
+            }
+            // #endif
+            // #ifdef APP-PLUS-NVUE
+            this.ctx.setFillStyle(color);
+            // #endif
+        },
+
+        /**
+         * 设置线条样式
+         */
+        setLineStyle(lineColor, lineWidth) {
+            if (!this.ctx) return;
+            this.setLineCap('round');
+            this.setLineJoin('round');
+            this.setStrokeStyle(lineColor);
+            this.setLineWidth(lineWidth);
+        },
+        setLineCap(lineCap = 'round') {
+            if (!this.ctx) return;
+            if (this.ctx.setLineCap) {
+                this.ctx.setLineCap(lineCap);
+            } else {
+                this.ctx.lineCap = lineCap;
+            }
+        },
+        setLineJoin(lineJoin = 'round') {
+            if (!this.ctx) return;
+            if (this.ctx.setLineJoin) {
+                this.ctx.setLineJoin(lineJoin);
+            } else {
+                this.ctx.lineJoin = lineJoin;
+            }
+        },
+        setStrokeStyle(color) {
+            if (!this.ctx) return;
+            if (this.ctx.setStrokeStyle) {
+                this.ctx.setStrokeStyle(color);
+            } else {
+                this.ctx.strokeStyle = color;
+            }
+        },
+        setLineWidth(width) {
+            if (!this.ctx) return;
+            if (this.ctx.setLineWidth) {
+                this.ctx.setLineWidth(width);
+            } else {
+                this.ctx.lineWidth = width;
+            }
+        },
+
+        /**
+         * 开始路径
+         */
+        beginPath() {
+            if (!this.ctx) return;
+            this.ctx.beginPath();
+        },
+
+        /**
+         * 移动到某点
+         */
+        moveTo(x, y) {
+            if (!this.ctx) return;
+            this.ctx.moveTo(x, y);
+        },
+
+        /**
+         * 画线到某点
+         */
+        lineTo(x, y) {
+            if (!this.ctx) return;
+            this.ctx.lineTo(x, y);
+        },
+
+        /**
+         * 描边
+         */
+        stroke() {
+            if (!this.ctx) return;
+            this.ctx.stroke();
+        },
+
+        /**
+         * 关闭路径
+         */
+        closePath() {
+            if (!this.ctx) return;
+            this.ctx.closePath();
+        },
+
+        /**
+         * 绘制操作
+         */
+        draw(isLastDraw = false) {
+            // #ifndef MP-WEIXIN
+            if (this.ctx && typeof this.ctx.draw === 'function') {
+                this.ctx.draw(isLastDraw);
+            }
+            // #endif
+        },
+
+        /**
+         * 导出图片
+         */
+        exportImage(fileType = 'png', quality = 1) {
+            return new Promise((resolve, reject) => {
+                // #ifdef MP-WEIXIN
+                // 微信小程序中需要先完成绘制，然后导出图片
+                setTimeout(() => {
+                    uni.canvasToTempFilePath({
+                        x: 0,
+                        y: 0,
+                        width: this.actualWidth,
+                        height: this.actualHeight,
+                        destWidth: this.actualWidth * 2, // 使用双倍尺寸以提高清晰度
+                        destHeight: this.actualHeight * 2,
+                        canvas: canvasNode, // 2d必须
+                        canvasId: this.canvasId,
+                        fileType: fileType,
+                        quality: quality,
+                        success: (res) => {
+                            resolve(res.tempFilePath);
+                        },
+                        fail: (err) => {
+                            console.error('导出图片失败:', err);
+                            reject(err);
+                        }
+                    }, this);
+                }, 50); // 等待50毫秒确保绘制完成
+                // #endif
+
+                // #ifndef MP-WEIXIN
+                uni.canvasToTempFilePath({
+                    canvas: canvasNode, // 2d必须
+                    canvasId: this.canvasId,
+                    fileType: fileType,
+                    quality: quality,
+                    success: (res) => {
+                        resolve(res.tempFilePath);
+                    },
+                    fail: (err) => {
+                        console.error('导出图片失败:', err);
+                        reject(err);
+                    }
+                }, this);
+                // #endif
+            });
+        },
+
         /**
          * 使用根节点宽高 设置新的size
          * @return {Promise<void>}
@@ -132,15 +394,30 @@ export default {
         async setNewSize(){
             const rootNode = await this.getCanvasNode(this.rootId, false);
             const { width , height } = rootNode;
-            this.widthLocal = height
-            this.heightLocal = width
-        },
+            this.widthLocal = height;
+            this.heightLocal = width;
+        }
     },
+    
     async mounted() {
         // 如果使用根节点的宽高 则 重新设置 size
         if(this.useRootHeightAndWidth){
-            await this.setNewSize()
+            await this.setNewSize();
         }
+        
+        // 初始化Canvas
+        await this.initCanvas();
     }
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+    .u-canvas {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .u-canvas__canvas {
+        display: block;
+    }
+</style>

package/components/u-checkbox-group/u-checkbox-group.vue

@@ -109,7 +109,10 @@
 				this.$emit("input", values);
 				// #endif
        			// 放在最后更新，否则change事件传出去的values不会更新
-				this.$emit('change', values)
+				this.$emit('change', values, {
+					isChecked: childInstance.$data['isChecked'],
+					name: childInstance.$props['name'] // 当前变动的checkbox的name值
+				})
 			},
 		}
 	}

package/components/u-qrcode/u-qrcode.vue

@@ -135,7 +135,7 @@ export default {
             default: () => false
         },
     },
-    emits: ['result', 'longpressCallback'],
+    emits: ['preview', 'result', 'longpressCallback'],
     data() {
         return {
             loading: false,

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

@@ -146,6 +146,9 @@ export default {
 			}
 		});
       },
+	  closeSelect() {
+		this.isOpen = false;
+	  },
 	  overlayClick() {
 		  this.isOpen = false;
 	  },