uview-pro 0.6.0 → 0.6.2

package/changelog.md

@@ -1,3 +1,37 @@
+## 0.6.2（2026-05-15）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-checkbox:** 修复多选框在头条、抖音小程序图标偏移的问题 ([8ea1838](https://github.com/anyup/uView-Pro/commit/8ea18383b94b421cabea7d080a6867f4b6133ff5))
+- **u-radio:** 修复单选框在头条、抖音小程序图标偏移的问题 ([dd7d6fe](https://github.com/anyup/uView-Pro/commit/dd7d6fee5a22bb39b3dcea9a24b9a06da40ee20e))
+
+### ✨ Features | 新功能
+
+- 添加 u-input 组件禁用状态样式 (#155) ([1145d99](https://github.com/anyup/uView-Pro/commit/1145d996ca111da769665ee5dca1bf07a0a1968d))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/1361176289"><img src="https://github.com/1361176289.png?size=40" width="40" height="40" alt="小陆同学" title="小陆同学"/></a> 
+
+## 0.6.1（2026-05-13）
+
+### ✨ Features | 新功能
+
+- **theme:** 添加默认颜色变量的RGB值支持 ([59af59f](https://github.com/anyup/uView-Pro/commit/59af59f5ea160155939ec4c6c3e33f968910c3e4))
+- **u-picker:** 支持自定义标题插槽并调整样式 ([c3f2967](https://github.com/anyup/uView-Pro/commit/c3f296718a53449665cf14441ed1adef817274d1))
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- **release:** bump version to 0.6.0 ([cb7351f](https://github.com/anyup/uView-Pro/commit/cb7351fe85e96a5abcd2d4eea0c1771f62148fd0))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **canvas:** 修复头条小程序中CanvasContext的Illegal invocation错误 ([05ebe29](https://github.com/anyup/uView-Pro/commit/05ebe2998007421cf2d2db8664bbe2963419129f))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
+
 ## 0.6.0（2026-05-12）
 
 ### ✨ Features | 新功能

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

@@ -1,12 +1,7 @@
 <template>
     <view class="u-checkbox" :style="$u.toStyle(checkboxStyle, customStyle)" :class="customClass">
         <view class="u-checkbox__icon-wrap" @tap="toggle" :class="iconClass" :style="$u.toStyle(iconStyle)">
-            <u-icon
-                custom-class="u-checkbox__icon-wrap__icon"
-                name="checkbox-mark"
-                :size="checkboxIconSize"
-                :color="iconColor"
-            />
+            <u-icon name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" />
         </view>
         <view
             class="u-checkbox__label"
@@ -323,11 +318,9 @@ defineExpose({
         font-size: 20px;
         border: 1px solid var(--u-border-color);
         transition-duration: 0.2s;
-
         /* #ifdef MP-TOUTIAO */
-        &__icon {
-            line-height: 0;
-        }
+        // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+        line-height: 0;
         /* #endif */
 
         &--circle {

package/components/u-index-list/u-index-list.vue

@@ -248,7 +248,7 @@ function onScroll() {
  */
 function onTouchMove(event: TouchEvent) {
     touchmove.value = true;
-    const sidebarLength = children.length;
+    const sidebarLength = indexList.value.length;
     const touch = event.touches[0];
     const itemHeight = sidebar.height / sidebarLength;
     let clientY = touch.clientY;

package/components/u-input/u-input.vue

@@ -4,7 +4,8 @@
         :class="[
             {
                 'u-input--border': border,
-                'u-input--error': validateState
+                'u-input--error': validateState,
+                'u-input--disabled': disabled
             },
             customClass
         ]"
@@ -328,6 +329,7 @@ function onClear(event: any) {
 }
 
 function inputClick() {
+    if (props.disabled) return;
     emit('click');
 }
 
@@ -391,6 +393,25 @@ defineExpose({
         border-color: $u-type-error !important;
     }
 
+    &--disabled {
+        background-color: $u-bg-gray-light;
+    }
+
+    &--disabled &__input {
+        background-color: transparent;
+        color: $u-light-color;
+        -webkit-text-fill-color: $u-light-color;
+        padding-left: 10rpx;
+    }
+
+    &--disabled &__textarea {
+        background-color: transparent;
+        color: $u-light-color;
+        -webkit-text-fill-color: $u-light-color;
+        padding-left: 10rpx;
+        padding-top: 10rpx;
+    }
+
     &__right-icon {
         position: relative;
         z-index: 2;

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

@@ -21,7 +21,11 @@
                 >
                     {{ cancelText }}
                 </view>
-                <view class="u-picker__title u-line-1">{{ title }}</view>
+                <view class="u-picker__title u-line-1">
+                    <slot name="title">
+                        {{ title }}
+                    </slot>
+                </view>
                 <view
                     class="u-btn-picker u-btn-picker--primary"
                     :style="{ color: moving ? cancelColor : confirmColor }"
@@ -777,7 +781,7 @@ onMounted(() => {
 
 .u-picker-header {
     width: 100%;
-    height: 90rpx;
+    min-height: 90rpx;
     @include vue-flex;
     justify-content: space-between;
     align-items: center;

package/components/u-radio/u-radio.vue

@@ -1,12 +1,7 @@
 <template>
     <view class="u-radio" :style="$u.toStyle(radioStyle, customStyle)" :class="customClass">
         <view class="u-radio__icon-wrap" @tap="toggle" :class="iconClass" :style="$u.toStyle(iconStyle)">
-            <u-icon
-                custom-class="u-radio__icon-wrap__icon"
-                name="checkbox-mark"
-                :size="elIconSize"
-                :color="iconColor"
-            />
+            <u-icon name="checkbox-mark" :size="elIconSize" :color="iconColor" />
         </view>
         <view
             class="u-radio__label"
@@ -309,12 +304,9 @@ function setRadioCheckedStatus() {
         font-size: 20px;
         border: 1px solid var(--u-border-color);
         transition-duration: 0.2s;
-
         /* #ifdef MP-TOUTIAO */
         // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
-        &__icon {
-            line-height: 0;
-        }
+        line-height: 0;
         /* #endif */
 
         &--circle {

package/components/u-textarea/u-textarea.vue

@@ -395,6 +395,14 @@ defineExpose({
         background-color: $u-bg-gray-light;
     }
 
+    &--disabled &__field {
+        background-color: transparent;
+        color: $u-light-color;
+        -webkit-text-fill-color: $u-light-color;
+        padding-left: 10rpx;
+        padding-top: 10rpx;
+    }
+
     &__field {
         flex: 1;
         font-size: 28rpx;

package/libs/util/canvas-2d.ts

@@ -4,7 +4,46 @@
  * @returns
  */
 export function canvas2d(ctx: CanvasRenderingContext2D): UniApp.CanvasContext {
-    return Object.assign(ctx, {
+    // 绑定 this 到 ctx，避免头条小程序等环境中出现 Illegal invocation 错误
+    const boundCtx = {
+        arc: ctx.arc.bind(ctx),
+        arcTo: ctx.arcTo.bind(ctx),
+        beginPath: ctx.beginPath.bind(ctx),
+        bezierCurveTo: ctx.bezierCurveTo.bind(ctx),
+        clearRect: ctx.clearRect.bind(ctx),
+        clip: ctx.clip.bind(ctx),
+        closePath: ctx.closePath.bind(ctx),
+        createImageData: ctx.createImageData.bind(ctx),
+        createLinearGradient: ctx.createLinearGradient.bind(ctx),
+        createPattern: ctx.createPattern.bind(ctx),
+        createRadialGradient: ctx.createRadialGradient.bind(ctx),
+        drawImage: ctx.drawImage.bind(ctx),
+        fill: ctx.fill.bind(ctx),
+        fillRect: ctx.fillRect.bind(ctx),
+        fillText: ctx.fillText.bind(ctx),
+        getImageData: ctx.getImageData.bind(ctx),
+        getLineDash: ctx.getLineDash.bind(ctx),
+        isPointInPath: ctx.isPointInPath.bind(ctx),
+        isPointInStroke: ctx.isPointInStroke.bind(ctx),
+        lineTo: ctx.lineTo.bind(ctx),
+        measureText: ctx.measureText.bind(ctx),
+        moveTo: ctx.moveTo.bind(ctx),
+        putImageData: ctx.putImageData.bind(ctx),
+        quadraticCurveTo: ctx.quadraticCurveTo.bind(ctx),
+        rect: ctx.rect.bind(ctx),
+        restore: ctx.restore.bind(ctx),
+        rotate: ctx.rotate.bind(ctx),
+        save: ctx.save.bind(ctx),
+        scale: ctx.scale.bind(ctx),
+        setLineDash: ctx.setLineDash.bind(ctx),
+        setTransform: ctx.setTransform.bind(ctx),
+        stroke: ctx.stroke.bind(ctx),
+        strokeRect: ctx.strokeRect.bind(ctx),
+        strokeText: ctx.strokeText.bind(ctx),
+        transform: ctx.transform.bind(ctx),
+        translate: ctx.translate.bind(ctx),
+        resetTransform: ctx.resetTransform?.bind(ctx),
+        roundRect: (ctx as any).roundRect?.bind(ctx),
         setFillStyle(color: string | CanvasGradient) {
             ctx.fillStyle = color;
         },
@@ -45,5 +84,99 @@ export function canvas2d(ctx: CanvasRenderingContext2D): UniApp.CanvasContext {
         createCircularGradient() {},
         draw() {},
         addColorStop() {}
-    }) as unknown as UniApp.CanvasContext;
+    };
+    // 复制属性访问器
+    Object.defineProperties(boundCtx, {
+        fillStyle: {
+            get: () => ctx.fillStyle,
+            set: value => {
+                ctx.fillStyle = value;
+            }
+        },
+        strokeStyle: {
+            get: () => ctx.strokeStyle,
+            set: value => {
+                ctx.strokeStyle = value;
+            }
+        },
+        lineWidth: {
+            get: () => ctx.lineWidth,
+            set: value => {
+                ctx.lineWidth = value;
+            }
+        },
+        lineCap: {
+            get: () => ctx.lineCap,
+            set: value => {
+                ctx.lineCap = value;
+            }
+        },
+        lineJoin: {
+            get: () => ctx.lineJoin,
+            set: value => {
+                ctx.lineJoin = value;
+            }
+        },
+        miterLimit: {
+            get: () => ctx.miterLimit,
+            set: value => {
+                ctx.miterLimit = value;
+            }
+        },
+        globalAlpha: {
+            get: () => ctx.globalAlpha,
+            set: value => {
+                ctx.globalAlpha = value;
+            }
+        },
+        globalCompositeOperation: {
+            get: () => ctx.globalCompositeOperation,
+            set: value => {
+                ctx.globalCompositeOperation = value;
+            }
+        },
+        font: {
+            get: () => ctx.font,
+            set: value => {
+                ctx.font = value;
+            }
+        },
+        textAlign: {
+            get: () => ctx.textAlign,
+            set: value => {
+                ctx.textAlign = value;
+            }
+        },
+        textBaseline: {
+            get: () => ctx.textBaseline,
+            set: value => {
+                ctx.textBaseline = value;
+            }
+        },
+        shadowOffsetX: {
+            get: () => ctx.shadowOffsetX,
+            set: value => {
+                ctx.shadowOffsetX = value;
+            }
+        },
+        shadowOffsetY: {
+            get: () => ctx.shadowOffsetY,
+            set: value => {
+                ctx.shadowOffsetY = value;
+            }
+        },
+        shadowBlur: {
+            get: () => ctx.shadowBlur,
+            set: value => {
+                ctx.shadowBlur = value;
+            }
+        },
+        shadowColor: {
+            get: () => ctx.shadowColor,
+            set: value => {
+                ctx.shadowColor = value;
+            }
+        }
+    });
+    return boundCtx as unknown as UniApp.CanvasContext;
 }

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式、多语言",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",