uview-pro 0.5.1 → 0.5.3

package/changelog.md

@@ -1,14 +1,66 @@
-## 0.5.1（2026-01-15）
+## 0.5.3（2026-01-26）
 
-### ✨ Features | 新功能
+### ♻️ Code Refactoring | 代码重构
 
-- **locale:** 统一组件国际化命名空间，以保持命名的一致性并避免与自定义字段时冲突 ([8bd3cc3](https://github.com/anyup/uView-Pro/commit/8bd3cc32b26349da63f5005cb3c29e575c831142))
-- **u-form:** 支持label插槽功能 ([f82994f](https://github.com/anyup/uView-Pro/commit/f82994f5500ec4509dff64c05e115afb0465d4a2))
+- **demo-page:** 移除标签栏外层sticky组件 ([ed49275](https://github.com/anyup/uView-Pro/commit/ed49275bc2962426dc4f9185b4b35f6a994cf383))
+
+### 👷 Continuous Integration | CI 配置
+
+- 添加 npm 包测试脚本 ([78c5524](https://github.com/anyup/uView-Pro/commit/78c5524abbbc368949ec58437361c995f5146234))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **locale:** 修复本地运行时locale国际化字段未加载成功的问题 ([10c017a](https://github.com/anyup/uView-Pro/commit/10c017a401232224ca1642274d65f031f74f12f0))
+- **u-picker:** 修复u-picker/u-select选择器在亮色/暗黑模式下背景色显示问题 ([072a6cc](https://github.com/anyup/uView-Pro/commit/072a6cc1095b5f17b0c15c3cd2a3d6a75d8a9f08))
 
 ### 👥 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.5.2（2026-01-23）
+
+### ✨ Features | 新功能
+
+- **u-checkbox-group:** 重构u-checkbox多选框组件，group支持v-model双向绑定，标准化使用api ([e4a12f1](https://github.com/anyup/uView-Pro/commit/e4a12f1af6a4d8cae18823b42a918052df36b62d))
+- **hooks:** 新增防抖和节流hook ([4b09373](https://github.com/anyup/uView-Pro/commit/4b09373c31dc3ab7ded01c6ea0cfdf902642b857))
+- **u-search:** 新增adjust-position属性控制键盘弹出时的高度调节 ([3443e7c](https://github.com/anyup/uView-Pro/commit/3443e7cc0d754c10df03134e8bc2c6c977758610))
+- **u-tabbar:** 调整u-tabbar凸起图标上边距以优化显示效果 ([d0963be](https://github.com/anyup/uView-Pro/commit/d0963be197079733779719aae43694ae5b47e6bc))
+- **u-transition:** 新增transition过渡动画组件 ([28ee2c8](https://github.com/anyup/uView-Pro/commit/28ee2c8b0f74bae722f0fe50e498e3407907d2f6))
+- **u-transition:** 添加动画模式切换时的时序控制 ([af4bf0a](https://github.com/anyup/uView-Pro/commit/af4bf0a690128ba16e7660d2ae54c5b93644cfdf))
+- **u-text:** 优化按钮模式在block模式下的样式 ([afda81d](https://github.com/anyup/uView-Pro/commit/afda81d0c8fa7b628b81f8368e6bd2983779b7c9))
+- **u-radio:** 添加label和value属性支持 ([1b824d7](https://github.com/anyup/uView-Pro/commit/1b824d7867dc7fcc3793d7b5d84cbbbcb512dab0))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-checkbox-group:** 修复全选时，u-checkbox-group多次触发change的问题 ([9f813df](https://github.com/anyup/uView-Pro/commit/9f813dfb8a2b8e178b7347223281e09b039f74b0))
+- **u-gap:** 修复 gap 间隔槽传递带单位尺寸无法正确解析的问题 ([cc24efd](https://github.com/anyup/uView-Pro/commit/cc24efd658e510fb9655a189ceaee2647db81528))
+- **u-alert-tips:** 修复微信小程序下组件样式和图标配置不生效的问题 ([d74900e](https://github.com/anyup/uView-Pro/commit/d74900e9e8a61a68b8971abc81e440e8449d3576))
+- **u-navbar:** 修复获取状态栏高度在某些平台失败的问题 ([b8b288e](https://github.com/anyup/uView-Pro/commit/b8b288e33348b78e03be349c6c123e36511342af))
+- **u-toast:** 修复toast提示组件设置prop无效的问题 ([ecd3a0a](https://github.com/anyup/uView-Pro/commit/ecd3a0a23a0ca039fa0abe3a946bfdf1024dd10a))
+- **locale:** 修复注册uview-pro组件库时，未传递locale导致初始化语言包失败的问题 ([d716100](https://github.com/anyup/uView-Pro/commit/d7161000fe9e3d222453603d8fa31d29a1b9a9bb))
+- **u-field:** 修复u-field在禁用状态下，点击输入框无法触发click事件的问题 ([f47761d](https://github.com/anyup/uView-Pro/commit/f47761d00fe2913f0e611577651a3f4108e060b6))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **demo:** 重构u-checkbox复选框演示示例 ([77fc19b](https://github.com/anyup/uView-Pro/commit/77fc19b6f23f8d776b7a56ef9ac27726da7405a1))
+- **demo:** 同步鸿蒙应用功能 ([2ac7050](https://github.com/anyup/uView-Pro/commit/2ac70500004e04bd22442d696e3e869ba33ac355))
+- update release scripts ([818f8b9](https://github.com/anyup/uView-Pro/commit/818f8b9cf6a0a22893305f76e4af2b71409cbc12))
+
+### 👥 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.5.1（2026-01-15）
+
+### ✨ Features | 新功能
+
+- **locale:** 统一组件国际化命名空间，以保持命名的一致性并避免与自定义字段时冲突 ([8bd3cc3](https://github.com/anyup/uView-Pro/commit/8bd3cc32b26349da63f5005cb3c29e575c831142))
+- **u-form:** 支持label插槽功能 ([f82994f](https://github.com/anyup/uView-Pro/commit/f82994f5500ec4509dff64c05e115afb0465d4a2))
+
+### 👥 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.5.0（2026-01-14）
 
 ### ✨ Features | 新功能

package/components/u-alert-tips/u-alert-tips.vue

@@ -23,9 +23,9 @@
                 v-if="showIcon"
                 :name="uIconName"
                 :size="description ? 40 : 32"
-                class="u-icon"
                 :color="uIconType"
                 :custom-style="iconStyle"
+                custom-class="u-tips-icon"
             ></u-icon>
         </view>
         <view class="u-alert-content" @tap.stop="onClick">
@@ -44,10 +44,10 @@
                 name="close"
                 color="var(--u-light-color)"
                 :size="22"
-                class="u-close-icon"
-                :style="{
+                :custom-style="{
                     top: description ? '18rpx' : '24rpx'
                 }"
+                custom-class="u-close-icon"
             ></u-icon>
         </view>
         <text
@@ -56,8 +56,9 @@
             :style="{
                 top: description ? '18rpx' : '24rpx'
             }"
-            >{{ closeText }}</text
         >
+            {{ closeText }}
+        </text>
     </view>
 </template>
 
@@ -75,7 +76,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import uIcon from '../u-icon/u-icon.vue';
 import { computed } from 'vue';
 import { $u } from '../..';
 import { AlertTipsProps } from './types';
@@ -195,6 +195,16 @@ function onClose() {
     &--border--info-disabled {
         border-color: $u-type-info-disabled;
     }
+
+    :deep(.u-tips-icon) {
+        margin-right: 16rpx;
+    }
+
+    :deep(.u-close-icon) {
+        position: absolute;
+        right: 20rpx;
+        cursor: pointer;
+    }
 }
 
 .u-close-alert-tips {
@@ -202,10 +212,6 @@ function onClose() {
     visibility: hidden;
 }
 
-.u-icon {
-    margin-right: 16rpx;
-}
-
 .u-alert-title {
     font-size: 28rpx;
     color: $u-main-color;
@@ -217,12 +223,6 @@ function onClose() {
     color: $u-content-color;
 }
 
-.u-close-icon {
-    position: absolute;
-    top: 20rpx;
-    right: 20rpx;
-}
-
 .u-close-hover {
     color: red;
 }

package/components/u-checkbox/types.ts

@@ -10,8 +10,12 @@ export type CheckboxValue = string | number | boolean;
 
 export const CheckboxProps = {
     ...baseProps,
-    /** checkbox的名称 */
+    /** checkbox的标签 */
+    label: { type: String, default: '' },
+    /** checkbox的值 */
     name: { type: [String, Number], default: '' },
+    /** checkbox的值，不传递时为name的属性 */
+    value: { type: [String, Number], default: '' },
     /** 形状，square为方形，circle为原型 */
     shape: { type: String as PropType<Shape>, default: '' },
     /** 是否为选中状态 */

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

@@ -15,7 +15,9 @@
                 fontSize: $u.addUnit(labelSize)
             }"
         >
-            <slot />
+            <slot>
+                {{ label }}
+            </slot>
         </view>
     </view>
 </template>
@@ -34,7 +36,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { $u, useChildren } from '../..';
 import { CheckboxProps } from './types';
 
@@ -55,6 +57,29 @@ import { CheckboxProps } from './types';
 
 const props = defineProps(CheckboxProps);
 const emit = defineEmits(['change', 'update:modelValue']);
+// checkbox 是否选中，true/false
+const checkedValue = ref(props.modelValue);
+
+// checkbox 的value值，id
+const checkboxValue = computed(() => {
+    if (props.value !== '') return props.value;
+    return props.name;
+});
+
+watch(
+    () => props.modelValue,
+    (newVal: boolean) => {
+        checkedValue.value = newVal;
+    }
+);
+
+watch(
+    () => checkedValue.value,
+    (newVal: boolean) => {
+        emit('update:modelValue', newVal);
+    },
+    { immediate: true }
+);
 
 // 使用子组件Hook
 const { parentExposed } = useChildren('u-checkbox', 'u-checkbox-group');
@@ -92,7 +117,7 @@ const elShape = computed(() => {
 // 图标样式
 const iconStyle = computed(() => {
     let style: Record<string, string> = {};
-    if (elActiveColor.value && props.modelValue && !isDisabled.value) {
+    if (elActiveColor.value && checkedValue.value && !isDisabled.value) {
         style.borderColor = elActiveColor.value;
         style.backgroundColor = elActiveColor.value;
     }
@@ -103,15 +128,15 @@ const iconStyle = computed(() => {
 
 // checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
 const iconColor = computed(() => {
-    return props.modelValue ? 'var(--u-white-color)' : 'transparent';
+    return checkedValue.value ? 'var(--u-white-color)' : 'transparent';
 });
 
 const iconClass = computed(() => {
     let classes: string[] = [];
     classes.push('u-checkbox__icon-wrap--' + elShape.value);
-    if (props.modelValue == true) classes.push('u-checkbox__icon-wrap--checked');
+    if (checkedValue.value == true) classes.push('u-checkbox__icon-wrap--checked');
     if (isDisabled.value) classes.push('u-checkbox__icon-wrap--disabled');
-    if (props.modelValue && isDisabled.value) classes.push('u-checkbox__icon-wrap--disabled--checked');
+    if (checkedValue.value && isDisabled.value) classes.push('u-checkbox__icon-wrap--disabled--checked');
     return classes.join(' ');
 });
 
@@ -157,12 +182,7 @@ function toggle() {
  * 触发change事件
  */
 function emitEvent() {
-    const changeValue = {
-        value: !props.modelValue,
-        name: props.name
-    };
-    emit('change', changeValue);
-
+    emit('change', !checkedValue.value);
     // 通知父组件状态变化
     setTimeout(() => {
         if (parentExposed.value?.emitEvent) {
@@ -176,31 +196,34 @@ function emitEvent() {
  */
 function setValue() {
     // 判断是否超过了可选的最大数量
-    if (props.modelValue == true) {
+    if (checkedValue.value == true) {
         emitEvent();
-        emit('update:modelValue', false);
+        checkedValue.value = false;
     } else {
         if (parentExposed?.value?.validateSelection && !parentExposed?.value?.validateSelection()) {
             return;
         }
         emitEvent();
-        emit('update:modelValue', true);
+        checkedValue.value = true;
     }
 }
 
 // 设置组件的modelValue值
 function setChecked(data: any) {
     if (!isDisabled.value) {
-        emit('update:modelValue', data.checked);
-        if (data.checked !== props.modelValue) {
+        const needEmit = checkedValue.value !== data.checked;
+        checkedValue.value = data.checked;
+        if (needEmit) {
             emitEvent();
         }
     }
 }
 
 defineExpose({
-    isChecked: computed(() => props.modelValue),
+    isChecked: computed(() => checkedValue.value),
+    label: props.label,
     name: props.name,
+    value: checkboxValue.value,
     setValue,
     emitEvent,
     props,

package/components/u-checkbox-group/types.ts

@@ -10,6 +10,8 @@ import { getColor } from '../../';
 
 export const CheckboxGroupProps = {
     ...baseProps,
+    /** 绑定值，选中的复选框name组成的数组 */
+    modelValue: { type: Array as PropType<(string | number)[]>, default: undefined },
     /** 最多能选中多少个checkbox */
     max: { type: Number, default: 999 },
     /** 是否禁用所有复选框 */

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

@@ -18,14 +18,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, computed } from 'vue';
-import { $u, useParent, useChildren } from '../..';
+import { getCurrentInstance, computed, watch, nextTick, onMounted } from 'vue';
+import { $u, useParent, useChildren, useDebounce } from '../..';
 import { CheckboxGroupProps } from './types';
 
 /**
  * checkboxGroup 开关选择器父组件Group
  * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
  * @tutorial https://uviewpro.cn/zh/components/checkbox.html
+ * @property {Array} modelValue 绑定值，选中的复选框name组成的数组（支持v-model双向绑定）
  * @property {String Number} max 最多能选中多少个checkbox（默认999）
  * @property {String Number} size 组件整体的大小，单位rpx（默认40）
  * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
@@ -35,32 +36,65 @@ import { CheckboxGroupProps } from './types';
  * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
  * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
  * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认主题色primary）
- * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
- * @example <u-checkbox-group></u-checkbox-group>
+ * @event {Function} change 任一个checkbox状态发生变化时触发，回调为选中的name数组
+ * @example <u-checkbox-group v-model="selectedValues">
+ *              <u-checkbox name="apple">苹果</u-checkbox>
+ *              <u-checkbox name="banana">香蕉</u-checkbox>
+ *          </u-checkbox-group>
  */
-const instance = getCurrentInstance();
 const props = defineProps(CheckboxGroupProps);
 const emit = defineEmits(['update:modelValue', 'change']);
 
 // 使用父组件Hook
 const { children, broadcast } = useParent('u-checkbox-group');
 const { emitToParent } = useChildren('u-checkbox-group', 'u-form-item');
+const { debounce } = useDebounce(1);
 
 /**
- * 派发 change 事件和表单校验
+ * 根据modelValue设置子组件状态
  */
-function emitEvent() {
-    // 收集所有选中的 name
-    let values: any[] = [];
+function syncChildrenSelection() {
+    if (!children || children.length === 0 || !props.modelValue) return;
+    const modelValueSet = new Set(props.modelValue);
     children.forEach((child: any) => {
-        if (child.getExposed?.()?.isChecked.value) {
-            values.push(child.getExposed?.()?.name);
+        const childValue = child.getExposed?.()?.value;
+        const shouldBeChecked = modelValueSet.has(childValue);
+        const isCurrentlyChecked = child.getExposed?.()?.isChecked.value;
+
+        if (shouldBeChecked !== isCurrentlyChecked) {
+            child.getExposed?.()?.setChecked({ checked: shouldBeChecked });
         }
     });
-    emit('change', values);
-    setTimeout(() => {
-        emitToParent('onFormChange', values);
-    }, 60);
+}
+
+/**
+ * 监听modelValue变化，同步子组件状态
+ */
+watch(
+    () => props.modelValue,
+    () => {
+        syncChildrenSelection();
+    }
+);
+
+/**
+ * 派发 change 事件和表单校验
+ */
+function emitEvent() {
+    debounce(() => {
+        // 收集所有选中的 name
+        let values: any[] = [];
+        children.forEach((child: any) => {
+            if (child.getExposed?.()?.isChecked.value) {
+                values.push(child.getExposed?.()?.value);
+            }
+        });
+        emit('change', values);
+        emit('update:modelValue', values);
+        setTimeout(() => {
+            emitToParent('onFormChange', values);
+        }, 60);
+    });
 }
 
 /**
@@ -96,6 +130,12 @@ function validateSelection() {
     return true;
 }
 
+onMounted(() => {
+    nextTick(() => {
+        syncChildrenSelection();
+    });
+});
+
 // 使用defineExpose暴露给外部
 defineExpose({
     // props
@@ -106,6 +146,7 @@ defineExpose({
     setAllChecked,
     getSelectedValues,
     validateSelection,
+    syncChildrenSelection,
 
     // 计算属性
     selectedCount: computed(() => children.filter(child => child.getExposed?.()?.isChecked.value).length),

package/components/u-field/u-field.vue

@@ -31,7 +31,7 @@
                 </text>
             </view>
             <view class="fild-body">
-                <view class="u-flex-1 u-flex" :style="[inputWrapStyle]">
+                <view class="u-flex-1 u-flex u-field-input-wrap" :style="[inputWrapStyle]">
                     <textarea
                         v-if="props.type === 'textarea'"
                         class="u-flex-1 u-textarea-class"
@@ -69,10 +69,12 @@
                         @confirm="onConfirm"
                         @tap="fieldClick"
                     />
+                    <!-- 透明遮罩，只在disabled时显示，用于响应点击事件 -->
+                    <view v-if="props.disabled" class="u-field-disabled-overlay" @tap="fieldClick"></view>
                 </view>
                 <u-icon
+                    v-if="props.clearable && props.modelValue != '' && focused && !props.disabled"
                     :size="props.clearSize"
-                    v-if="props.clearable && props.modelValue != '' && focused"
                     name="close-circle-fill"
                     color="var(--u-light-color)"
                     class="u-clear-icon"
@@ -385,4 +387,18 @@ function fieldClick() {
 .u-button-wrap {
     margin-left: 8rpx;
 }
+
+.u-field-input-wrap {
+    position: relative;
+}
+
+.u-field-disabled-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    z-index: 1;
+}
 </style>

package/components/u-form/u-form.vue

@@ -121,7 +121,7 @@ defineExpose({
         if (!fields.value.includes(field)) fields.value.push(field);
     },
     removeField(field: any) {
-        fields.value = fields.value.filter(f => f.prop !== field.prop)
+        fields.value = fields.value.filter(f => f.prop !== field.prop);
     },
     fields,
     rules,

package/components/u-gap/u-gap.vue

@@ -38,9 +38,9 @@ const props = defineProps(GapProps);
 const gapStyle = computed(() => {
     return {
         backgroundColor: props.bgColor,
-        height: props.height + 'rpx',
-        marginTop: props.marginTop + 'rpx',
-        marginBottom: props.marginBottom + 'rpx'
+        height: $u.addUnit(props.height),
+        marginTop: $u.addUnit(props.marginTop),
+        marginBottom: $u.addUnit(props.marginBottom)
     };
 });
 </script>

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

@@ -95,7 +95,6 @@ import { NavbarProps } from './types';
 const props = defineProps(NavbarProps);
 // 获取系统状态栏的高度
 const systemInfo = uni.getSystemInfoSync();
-const windowInfo = uni.getWindowInfo();
 
 let menuButtonInfo: any = {};
 // 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
@@ -104,7 +103,14 @@ menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 // #endif
 
 // 状态栏高度
-const statusBarHeight = ref(windowInfo.statusBarHeight);
+const statusBarHeight = ref(0);
+// #ifdef APP || H5 || MP-ALIPAY || MP-WEIXIN
+const windowInfo = uni.getWindowInfo();
+statusBarHeight.value = windowInfo.statusBarHeight;
+// #endif
+// #ifndef APP || H5 || MP-ALIPAY || MP-WEIXIN
+statusBarHeight.value = systemInfo.statusBarHeight;
+// #endif
 
 // 转换字符数值为真正的数值
 const navbarHeight = computed(() => {

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

@@ -38,10 +38,12 @@
                     <picker-view
                         v-if="mode == 'region'"
                         :value="valueArr"
-                        @change="change"
                         class="u-picker-view"
+                        mask-class="u-picker-view-mask"
+                        indicator-class="u-picker-view-indicator"
                         @pickstart="pickstart"
                         @pickend="pickend"
+                        @change="change"
                     >
                         <picker-view-column v-if="params.province">
                             <view class="u-column-item" v-for="(item, index) in provinces" :key="index">
@@ -62,10 +64,12 @@
                     <picker-view
                         v-else-if="mode == 'time'"
                         :value="valueArr"
-                        @change="change"
                         class="u-picker-view"
+                        mask-class="u-picker-view-mask"
+                        indicator-class="u-picker-view-indicator"
                         @pickstart="pickstart"
                         @pickend="pickend"
+                        @change="change"
                     >
                         <picker-view-column v-if="params.year">
                             <view class="u-column-item" v-for="(item, index) in years" :key="index">
@@ -107,10 +111,12 @@
                     <picker-view
                         v-else-if="mode == 'selector'"
                         :value="valueArr"
-                        @change="change"
                         class="u-picker-view"
+                        mask-class="u-picker-view-mask"
+                        indicator-class="u-picker-view-indicator"
                         @pickstart="pickstart"
                         @pickend="pickend"
+                        @change="change"
                     >
                         <picker-view-column>
                             <view class="u-column-item" v-for="(item, index) in range" :key="index">
@@ -121,10 +127,12 @@
                     <picker-view
                         v-else-if="mode == 'multiSelector'"
                         :value="valueArr"
-                        @change="change"
                         class="u-picker-view"
+                        mask-class="u-picker-view-mask"
+                        indicator-class="u-picker-view-indicator"
                         @pickstart="pickstart"
                         @pickend="pickend"
+                        @change="change"
                     >
                         <picker-view-column v-for="(item, index) in range" :key="index">
                             <view class="u-column-item" v-for="(item1, index1) in item" :key="index1">
@@ -782,7 +790,7 @@ onMounted(() => {
 .u-picker-header::after {
     content: '';
     position: absolute;
-    border-bottom: 1rpx solid var(--u-bg-gray-light);
+    border-bottom: 1rpx solid var(--u-border-color);
     -webkit-transform: scaleY(0.5);
     transform: scaleY(0.5);
     bottom: 0;

package/components/u-radio/types.ts

@@ -8,6 +8,8 @@ import { baseProps } from '../common/props';
  */
 export const RadioProps = {
     ...baseProps,
+    label: { type: String, default: '' },
+    value: { type: [String, Number] as PropType<string | number>, default: '' },
     /** radio的名称 */
     name: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 形状，square为方形，circle为圆形 */

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

@@ -10,7 +10,9 @@
                 fontSize: $u.addUnit(labelSize)
             }"
         >
-            <slot />
+            <slot>
+                {{ label }}
+            </slot>
         </view>
     </view>
 </template>
@@ -55,6 +57,12 @@ const emit = defineEmits(['change']);
 // 使用组件关系 hooks 获取父组件
 const { parentExposed } = useChildren('u-radio', 'u-radio-group');
 
+// radio 的value值，id
+const radioValue = computed(() => {
+    if (props.value !== '') return props.value;
+    return props.name;
+});
+
 // 父组件的默认值（兼容没有父组件的场景）
 const parentData = computed(() => {
     return (
@@ -127,7 +135,7 @@ const elShape = computed(() =>
  */
 const iconStyle = computed(() => {
     let style: Record<string, string> = {};
-    if (elActiveColor.value && parentData.value.value == props.name && !elDisabled.value) {
+    if (elActiveColor.value && parentData.value.value == radioValue.value && !elDisabled.value) {
         style.borderColor = elActiveColor.value;
         style.backgroundColor = elActiveColor.value;
     }
@@ -136,14 +144,15 @@ const iconStyle = computed(() => {
     return style;
 });
 
-const iconColor = computed(() => (props.name == parentData.value.value ? 'var(--u-white-color)' : 'transparent'));
+const iconColor = computed(() => (radioValue.value == parentData.value.value ? 'var(--u-white-color)' : 'transparent'));
 
 const iconClass = computed(() => {
     let classes: string[] = [];
     classes.push('u-radio__icon-wrap--' + elShape.value);
-    if (props.name == parentData.value.value) classes.push('u-radio__icon-wrap--checked');
+    if (radioValue.value == parentData.value.value) classes.push('u-radio__icon-wrap--checked');
     if (elDisabled.value) classes.push('u-radio__icon-wrap--disabled');
-    if (props.name == parentData.value.value && elDisabled.value) classes.push('u-radio__icon-wrap--disabled--checked');
+    if (radioValue.value == parentData.value.value && elDisabled.value)
+        classes.push('u-radio__icon-wrap--disabled--checked');
     // 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
     return classes.join(' ');
 });
@@ -192,7 +201,7 @@ function toggle() {
  */
 function emitEvent() {
     // u-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
-    if (parentData.value.value != props.name) emit('change', props.name);
+    if (parentData.value.value != radioValue.value) emit('change', radioValue.value);
 }
 /**
  * 改变组件选中状态
@@ -201,7 +210,7 @@ function emitEvent() {
  */
 function setRadioCheckedStatus() {
     emitEvent();
-    parentExposed?.value?.setValue(props.name);
+    parentExposed?.value?.setValue(radioValue.value);
 }
 </script>