uview-pro 0.3.3 → 0.3.5

package/changelog.md

@@ -1,21 +1,64 @@
-## 0.3.3（2025-10-16）
-
-### 🐛 Bug Fixes | Bug 修复
-
-- **u-read-more:** 修复 init 方法无法在外部调用的问题 ([415d401](https://github.com/anyup/uView-Pro/commit/415d401883a3567653ab1f311b28b075b7bb5603))
-- **u-button:** 修复 hover-class 属性被忽略的问题 ([b919c58](https://github.com/anyup/uView-Pro/commit/b919c58cea048f9e559a6448cebe5abbf1490acf))
-
-### ♻️ Code Refactoring | 代码重构
-
-- **component-relation:** 重构组件关系逻辑并添加新功能 ([85d0cd2](https://github.com/anyup/uView-Pro/commit/85d0cd20db839a61733887f82825d47de0a1b1a6))
-- **u-talbe:** 重构u-td和u-th组件，增强u-table的兼容性 ([3fbbc52](https://github.com/anyup/uView-Pro/commit/3fbbc5233bd41b91ca829f9a65cf95ee3b599e36))
-- 修改 uView Pro 日志配置 ([6b9bb68](https://github.com/anyup/uView-Pro/commit/6b9bb6852af3eb24f109207f864145771c3e9c79))
-- **clipboard:** add clipboard function ([efdaa58](https://github.com/anyup/uView-Pro/commit/efdaa58dda923b281d9b764a82a7492f36717ac4))
-
-### 👥 Contributors
-
-<a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a> <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/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a> 
-
+## 0.3.5（2025-10-21）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-input:** 修复input组件不支持input事件的问题 ([52d6a6a](https://github.com/anyup/uView-Pro/commit/52d6a6aaeec9ec78e4088234ff7ba056cc10fd9c))
+- **u-search:** 修复search组件不支持input事件的问题 ([603b96f](https://github.com/anyup/uView-Pro/commit/603b96f7eeb16d3e54c82b0be7dd03deb930aef5))
+- **u-popup:** 修复微信小程序环境下，u-popup 组件 mode=center 时，设置关闭图标位置无效的问题 ([f08197a](https://github.com/anyup/uView-Pro/commit/f08197aafdc3f874b1efcddf6cc6ff9c9edde954))
+- **u-line-progress:** type 属性设置后仍被 active-color 内联样式覆盖的问题 ([c6f29f9](https://github.com/anyup/uView-Pro/commit/c6f29f9dc8437035a0e698e869af2fd418d0bd65))
+
+### ✨ Features | 新功能
+
+- **useChildren:** 添加子组件索引功能 ([8ad744f](https://github.com/anyup/uView-Pro/commit/8ad744fd51df934cc20c099686cbdc5512b22c79))
+- **addUnit:** 增强 addUnit 函数支持多值空格分隔 ([6d89cd3](https://github.com/anyup/uView-Pro/commit/6d89cd3c5aacc0770f6f2684fd737d0f05a6e929))
+- **u-action-sheet:** 新增自定义 ActionSheet 组件 ([f709523](https://github.com/anyup/uView-Pro/commit/f709523cba5a089eed7c717cc36b9ab199ae24da))
+
+### 📝 Documentation | 文档
+
+- 移除issue模板中的提交格式参考 ([83799e8](https://github.com/anyup/uView-Pro/commit/83799e882f69b0e8787a014cfab9f16ab34ba57c))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **u-popup:** 移除弹窗组件中的冗余代码 ([40c5b64](https://github.com/anyup/uView-Pro/commit/40c5b641539fce56af4f9a4ad2440b9240464a89))
+
+### 👥 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/sunjianwei"><img src="https://github.com/sunjianwei.png?size=40" width="40" height="40" alt="sunjianwei" title="sunjianwei"/></a> <a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a>
+
+## 0.3.4（2025-10-20）
+
+### ♻️ Code Refactoring | 代码重构
+
+- **components:** 移除不必要的父组件和事件总线相关代码，优化组件间通信 ([280c2f8](https://github.com/anyup/uView-Pro/commit/280c2f8acc75764a7706ec38c742cc16703c941a))
+- **u-safe-bottom:** 优化底部安全区组件 ([161f2d3](https://github.com/anyup/uView-Pro/commit/161f2d32ff6b9abbb6f8221a4dd99c438a606e94))
+- **u-status-bar:** 优化状态栏组件 ([53c50ab](https://github.com/anyup/uView-Pro/commit/53c50ab8b6314a7d702b90e6b48b79301a334090))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-subsection:** 优化列表和模式变化的监听逻辑，移除不必要的初始化调用 ([f77ee7c](https://github.com/anyup/uView-Pro/commit/f77ee7ccc7521ec2472f72dcf2fb47362ca0abd9))
+
+### 👥 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.3.3（2025-10-16）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-read-more:** 修复 init 方法无法在外部调用的问题 ([415d401](https://github.com/anyup/uView-Pro/commit/415d401883a3567653ab1f311b28b075b7bb5603))
+- **u-button:** 修复 hover-class 属性被忽略的问题 ([b919c58](https://github.com/anyup/uView-Pro/commit/b919c58cea048f9e559a6448cebe5abbf1490acf))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **component-relation:** 重构组件关系逻辑并添加新功能 ([85d0cd2](https://github.com/anyup/uView-Pro/commit/85d0cd20db839a61733887f82825d47de0a1b1a6))
+- **u-talbe:** 重构u-td和u-th组件，增强u-table的兼容性 ([3fbbc52](https://github.com/anyup/uView-Pro/commit/3fbbc5233bd41b91ca829f9a65cf95ee3b599e36))
+- 修改 uView Pro 日志配置 ([6b9bb68](https://github.com/anyup/uView-Pro/commit/6b9bb6852af3eb24f109207f864145771c3e9c79))
+- **clipboard:** add clipboard function ([efdaa58](https://github.com/anyup/uView-Pro/commit/efdaa58dda923b281d9b764a82a7492f36717ac4))
+
+### 👥 Contributors
+
+<a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a> <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/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a>
+
 ## 0.3.2（2025-10-15）
 
 ### 📝 Documentation | 文档

package/components/u-action-sheet/types.ts

@@ -1,6 +1,7 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
 import { baseProps } from '../common/props';
+import { $u } from '../../';
 
 /**
  * actionSheet 操作菜单
@@ -8,7 +9,7 @@ import { baseProps } from '../common/props';
  */
 export const ActionSheetProps = {
     ...baseProps,
-    /** 点击遮罩是否可以关闭actionsheet */
+    /** 点击遮罩是否可以关闭actionSheet */
     maskCloseAble: { type: Boolean, default: true },
     /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
     list: {
@@ -18,7 +19,7 @@ export const ActionSheetProps = {
     /** 顶部的提示文字 */
     tips: {
         type: Object as unknown as PropType<ActionSheetTips>,
-        default: () => ({ text: '', color: '', fontSize: '26' })
+        default: () => ({ text: '', color: $u.color.tipsColor, fontSize: '26rpx' })
     },
     /** 底部的取消按钮 */
     cancelBtn: { type: Boolean, default: true },
@@ -31,7 +32,13 @@ export const ActionSheetProps = {
     /** 弹出的z-index值 */
     zIndex: { type: [String, Number], default: 0 },
     /** 取消按钮的文字提示 */
-    cancelText: { type: String, default: '取消' }
+    cancelText: { type: String, default: '取消' },
+    /** 字体颜色 */
+    color: { type: String, default: $u.color.mainColor },
+    /** 字体大小 */
+    fontSize: { type: [String, Number], default: '32rpx' },
+    /** 是否异步关闭 */
+    asyncClose: { type: Boolean, default: false }
 };
 
 export type ActionSheetProps = ExtractPropTypes<typeof ActionSheetProps>;

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

@@ -15,7 +15,7 @@
         <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
             {{ tips.text }}
         </view>
-        <block v-for="(item, index) in list" :key="index">
+        <block v-if="list && list.length > 0" v-for="(item, index) in list" :key="index">
             <view
                 @touchmove.stop.prevent
                 @tap="itemClick(index)"
@@ -28,10 +28,13 @@
                 <text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{ item.subText }}</text>
             </view>
         </block>
+        <template v-else>
+            <slot></slot>
+        </template>
         <view class="u-gab" v-if="cancelBtn"> </view>
         <view
             @touchmove.stop.prevent
-            class="u-actionsheet-cancel u-action-sheet-item"
+            class="u-action-sheet-cancel u-action-sheet-item"
             hover-class="u-hover-class"
             :hover-stay-time="150"
             v-if="cancelBtn"
@@ -57,7 +60,7 @@ export default {
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { $u } from '../..';
+import { $u, useParent } from '../..';
 import { ActionSheetProps } from './types';
 
 /**
@@ -82,6 +85,8 @@ const props = defineProps(ActionSheetProps);
 
 const emit = defineEmits(['update:modelValue', 'click', 'close']);
 
+useParent('u-action-sheet');
+
 const popupValue = computed({
     get: () => props.modelValue,
     set: (val: boolean) => emit('update:modelValue', val)
@@ -90,18 +95,18 @@ const popupValue = computed({
 // 顶部提示的样式
 const tipsStyle = computed(() => {
     let style: Record<string, string> = {};
-    if (props.tips.color) style.color = props.tips.color;
-    if (props.tips.fontSize) style.fontSize = props.tips.fontSize + 'rpx';
+    style.color = props.tips?.color || $u.color.tipsColor;
+    style.fontSize = $u.addUnit(props.tips?.fontSize || '26rpx');
     return style;
 });
 
 // 操作项目的样式
 const itemStyle = (index: number) => {
     let style: Record<string, string> = {};
-    if (props.list[index]?.color) style.color = props.list[index].color;
-    if (props.list[index]?.fontSize) style.fontSize = props.list[index].fontSize + 'rpx';
+    style.color = props.list[index]?.color || props.color;
+    style.fontSize = $u.addUnit(props.list[index]?.fontSize || props.fontSize);
     // 选项被禁用的样式
-    if (props.list[index]?.disabled) style.color = '#c0c4cc';
+    if (props.list[index]?.disabled) style.color = $u.color.lightColor;
     return style;
 };
 
@@ -136,8 +141,15 @@ function itemClick(index: number) {
     // disabled的项禁止点击
     if (props.list[index]?.disabled) return;
     emit('click', index);
+    if (props.asyncClose) return;
     emit('update:modelValue', false);
 }
+
+defineExpose({
+    props,
+    close,
+    itemClick
+});
 </script>
 
 <style lang="scss" scoped>
@@ -172,7 +184,7 @@ function itemClick(index: number) {
     background-color: rgb(234, 234, 236);
 }
 
-.u-actionsheet-cancel {
+.u-action-sheet-cancel {
     color: $u-main-color;
 }
 </style>

package/components/u-action-sheet-item/types.ts

@@ -0,0 +1,27 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import { baseProps } from '../common/props';
+import { $u } from '../../';
+
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ */
+export const ActionSheetItemProps = {
+    ...baseProps,
+    /** 标题 */
+    text: { type: String, default: '' },
+    /** 描述 */
+    subText: { type: String, default: '' },
+    /** 边距 */
+    padding: { type: [Number, String] as PropType<number | string>, default: '34rpx 0' },
+    /** 字体颜色 */
+    color: { type: String, default: $u.color.mainColor },
+    /** 字体大小 */
+    fontSize: { type: [String, Number], default: '32rpx' },
+    /** 是否禁用 */
+    disabled: { type: Boolean, default: false },
+    /** 是否异步关闭 */
+    asyncClose: { type: Boolean, default: false }
+};
+
+export type ActionSheetItemProps = ExtractPropTypes<typeof ActionSheetItemProps>;

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

@@ -0,0 +1,85 @@
+<template>
+    <view
+        class="u-action-sheet-item u-line-1"
+        :class="[!isLast ? 'u-border-bottom' : '', disabled ? 'u-action-sheet-item--disabled' : '', customClass]"
+        :style="$u.toStyle(itemStyle, customStyle)"
+        @click="handleClick"
+        @touchmove.stop.prevent
+        hover-class="u-hover-class"
+        :hover-stay-time="150"
+    >
+        <slot>
+            <text>{{ text }}</text>
+            <text class="u-action-sheet-item__subtext u-line-1" v-if="subText">{{ subText }}</text>
+        </slot>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-action-sheet-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ActionSheetItemProps } from './types';
+import { $u, useChildren } from '../../libs';
+
+const props = defineProps(ActionSheetItemProps);
+const emit = defineEmits(['click']);
+
+const { parent, parentExposed, childIndex, emitToParent } = useChildren('u-action-sheet-item', 'u-action-sheet');
+
+const isLast = computed(() => {
+    return (childIndex?.value ?? 0) + 1 >= (parent?.value?.getChildren()?.length ?? 0);
+});
+
+const itemStyle = computed(() => {
+    const style: Record<string, string> = {};
+    style.color = props.color || parentExposed?.value?.props?.color;
+    style.fontSize = $u.addUnit(props.fontSize || parentExposed?.value?.props?.fontSize);
+    style.padding = $u.addUnit(props.padding);
+    if (props.disabled) style.color = '#c0c4cc';
+    return style;
+});
+
+function handleClick() {
+    if (props.disabled) return;
+    emit('click', childIndex?.value || 0);
+    if (!props.asyncClose && !parentExposed?.value?.props?.asyncClose) {
+        emitToParent('itemClick', childIndex?.value || 0);
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-action-sheet-item {
+    @include vue-flex;
+    line-height: 1;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+    padding: 34rpx 0;
+    flex-direction: column;
+}
+
+.u-action-sheet-item--disabled {
+    color: $u-light-color;
+}
+
+.u-action-sheet-item__subtext {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 20rpx;
+}
+</style>

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

@@ -19,7 +19,7 @@ export default {
 
 <script setup lang="ts">
 import { getCurrentInstance, computed } from 'vue';
-import { $u, useParent } from '../..';
+import { $u, useParent, useChildren } from '../..';
 import { CheckboxGroupProps } from './types';
 
 /**
@@ -44,6 +44,7 @@ const emit = defineEmits(['update:modelValue', 'change']);
 
 // 使用父组件Hook
 const { children, broadcast } = useParent('u-checkbox-group');
+const { emitToParent } = useChildren('u-checkbox-group', 'u-form-item');
 
 /**
  * 派发 change 事件和表单校验
@@ -58,7 +59,7 @@ function emitEvent() {
     });
     emit('change', values);
     setTimeout(() => {
-        $u.dispatch(instance, 'u-form-item', 'on-form-change', values);
+        emitToParent('onFormChange', values);
     }, 60);
 }
 

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

@@ -88,15 +88,16 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch, getCurrentInstance, nextTick } from 'vue';
-import { $u, useChildren } from '../..';
-import { broadcast } from '../../libs/util/emitter';
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { $u, useChildren, useParent } from '../..';
 // @ts-ignore
 import schema from '../../libs/util/async-validator';
 import { FormItemProps } from './types';
 // 去除警告信息
 schema.warning = function () {};
 
+const { broadcast } = useParent('u-form-item');
+
 /**
  * form-item 表单item
  * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
@@ -120,8 +121,6 @@ const props = defineProps(FormItemProps);
 
 const { parentExposed } = useChildren('u-form-item', 'u-form');
 
-const instance = getCurrentInstance();
-
 // 组件状态
 const initialValue = ref(''); // 存储初始值，用于重置
 const validateState = ref(''); // 校验状态 success/error/validating
@@ -136,6 +135,15 @@ const parentData = ref({
     labelAlign: 'left' // 父表单 label 对齐
 });
 
+// 显示错误提示
+// errorType: ['message', 'toast', 'border-bottom', 'none']
+const showError = computed(() => (type: string) => {
+    // 如果errorType数组中含有none，或者toast提示类型
+    if (errorType.value.indexOf('none') >= 0) return false;
+    else if (errorType.value.indexOf(type) >= 0) return true;
+    else return false;
+});
+
 // 监听校验状态和父表单 errorType 变化
 watch(validateState, () => {
     broadcastInputError();
@@ -161,15 +169,6 @@ const uLabelWidth = computed(() => {
         : '100%';
 });
 
-// 显示错误提示
-// errorType: ['message', 'toast', 'border-bottom', 'none']
-const showError = computed(() => (type: string) => {
-    // 如果errorType数组中含有none，或者toast提示类型
-    if (errorType.value.indexOf('none') >= 0) return false;
-    else if (errorType.value.indexOf(type) >= 0) return true;
-    else return false;
-});
-
 // label的宽度
 const elLabelWidth = computed(() => {
     // label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值
@@ -215,17 +214,8 @@ const elBorderBottom = computed(() => {
 
 // 事件派发/广播工具
 function broadcastInputError() {
-    // 子组件发出事件，第三个参数为true或者false，true代表有错误
-    if (instance) {
-        // 这里可用 emitter 工具库的 broadcast 方法
-        // 子组件发出事件，第三个参数为true或者false，true代表有错误
-        broadcast(
-            instance,
-            'u-input',
-            'on-form-item-error',
-            validateState.value === 'error' && showError.value('border')
-        );
-    }
+    // 子组件发出事件，参数为true或者false，true代表有错误
+    broadcast('onFormItemError', validateState.value === 'error' && showError.value('border'));
 }
 
 /**

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

@@ -105,13 +105,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, getCurrentInstance } from 'vue';
-import { $u } from '../..';
-import { dispatch } from '../../libs/util/emitter';
+import { ref, computed, watch } from 'vue';
+import { $u, useChildren } from '../..';
 import { InputProps } from './types';
 
 const props = defineProps(InputProps);
-const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'confirm', 'click']);
+const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'confirm', 'click']);
+
+const { emitToParent } = useChildren('u-input', 'u-form-item');
 
 const defaultValue = ref(props.modelValue);
 const inputHeight = 70; // input的高度
@@ -158,10 +159,6 @@ const uSelectionStart = computed(() => String(props.selectionStart));
 // 光标结束位置
 const uSelectionEnd = computed(() => String(props.selectionEnd));
 
-const instance = getCurrentInstance();
-
-// 监听u-form-item发出的错误事件，将输入框边框变红色，失效了
-// uni.$on('on-form-item-error', onFormItemError);
 /**
  * change 事件
  * @param event
@@ -171,6 +168,7 @@ function handleInput(event: any) {
     // 判断是否去除空格
     if (props.trim) value = $u.trim(value);
     emit('update:modelValue', value);
+    emit('input', value);
     // 当前model 赋值
     defaultValue.value = value;
     // 过一个生命周期再发送事件给u-form-item，否则this.$emit('update:modelValue')更新了父组件的值，但是微信小程序上
@@ -183,7 +181,7 @@ function handleInput(event: any) {
         lastValue.value = value;
         // #endif
         // 通过 emitter 派发事件
-        dispatch(instance, 'u-form-item', 'on-form-change', value);
+        emitToParent('onFormChange', value);
     }, 40);
 }
 
@@ -205,12 +203,11 @@ function handleBlur(event: any) {
         if ($u.trim(value) == lastValue.value) return;
         lastValue.value = value;
         // #endif
-        dispatch(instance, 'u-form-item', 'on-form-blur', value);
+        emitToParent('onFormBlur', value);
     }, 40);
 }
 
 function onFormItemError(status: boolean) {
-    console.log('onFormItemError', status);
     validateState.value = status;
 }
 
@@ -235,6 +232,10 @@ function onClear(event: any) {
 function inputClick() {
     emit('click');
 }
+
+defineExpose({
+    onFormItemError
+});
 </script>
 
 <style lang="scss" scoped>

package/components/u-line-progress/u-line-progress.vue

@@ -65,7 +65,7 @@ const slots = useSlots();
 const progressStyle = computed(() => {
     let style: Record<string, string> = {};
     style.width = props.percent + '%';
-    if (props.activeColor) style.backgroundColor = props.activeColor;
+    if (!props.type && props.activeColor) style.backgroundColor = props.activeColor;
     return style;
 });
 </script>

package/components/u-popup/u-popup.vue

@@ -28,21 +28,16 @@
             :style="[style]"
         >
             <view
+                v-if="mode == 'center'"
                 class="u-mode-center-box"
                 @tap.stop.prevent
                 @touchmove.stop.prevent
-                v-if="mode == 'center'"
                 :style="[centerStyle]"
             >
-                <u-icon
-                    @click="close"
-                    v-if="closeable"
-                    class="u-close"
-                    :class="['u-close--' + closeIconPos]"
-                    :name="closeIcon"
-                    :color="closeIconColor"
-                    :size="closeIconSize"
-                ></u-icon>
+                <view v-if="closeable" @click="close" class="u-close" :class="['u-close--' + closeIconPos]">
+                    <u-icon :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
+                </view>
+
                 <scroll-view class="u-drawer__scroll-view" scroll-y="true">
                     <slot />
                 </scroll-view>
@@ -50,13 +45,13 @@
             <scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else>
                 <slot />
             </scroll-view>
-            <view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]">
-                <u-icon
-                    v-if="mode != 'center' && closeable"
-                    :name="closeIcon"
-                    :color="closeIconColor"
-                    :size="closeIconSize"
-                ></u-icon>
+            <view
+                v-if="mode != 'center' && closeable"
+                @click="close"
+                class="u-close"
+                :class="['u-close--' + closeIconPos]"
+            >
+                <u-icon :name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
             </view>
         </view>
     </view>

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

@@ -18,8 +18,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue';
-import { $u, useParent } from '../..';
+import { $u, useParent, useChildren } from '../..';
 import { RadioGroupProps } from './types';
 
 /**
@@ -42,6 +41,7 @@ const props = defineProps(RadioGroupProps);
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
+const { emitToParent } = useChildren('u-radio-group', 'u-form-item');
 useParent('u-radio-group');
 
 /**
@@ -73,7 +73,7 @@ function setValue(val: string | number) {
     // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
     setTimeout(() => {
         // 将当前的值发送到 u-form-item 进行校验
-        $u.dispatch(getCurrentInstance(), 'u-form-item', 'on-form-change', val);
+        emitToParent('onFormChange', val);
     }, 60);
 }
 

package/components/u-safe-bottom/props.ts

@@ -0,0 +1,11 @@
+import type { ExtractPropTypes } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * SafeBottomProps SafeBottom 底部安全区
+ */
+export const SafeBottomProps = {
+    ...baseProps,
+};
+
+export type SafeBottomProps = ExtractPropTypes<typeof SafeBottomProps>;

package/components/u-safe-bottom/u-safe-bottom.vue

@@ -1,5 +1,9 @@
 <template>
-    <view class="u-safe-bottom" :style="style" :class="[!isNVue && 'safe-area-inset-bottom']"></view>
+    <view
+        class="u-safe-bottom"
+        :style="$u.toStyle(style, customStyle)"
+        :class="[!isNVue && 'safe-area-inset-bottom', customClass]"
+    ></view>
 </template>
 
 <script lang="ts">
@@ -16,11 +20,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
-import { sys } from '../../libs/function/sys';
-import addUnit from '../../libs/function/addUnit';
-import deepMerge from '../../libs/function/deepMerge';
-import { mergeStyles } from '../../libs/function/styleUtils';
+import { ref, computed, onMounted, type CSSProperties } from 'vue';
+import { SafeBottomProps } from './props';
+import { $u } from '../../';
 
 /**
  * SafeBottom 底部安全区
@@ -28,24 +30,17 @@ import { mergeStyles } from '../../libs/function/styleUtils';
  * @property {String | Object} customStyle 自定义样式
  * @example <u-safe-bottom></u-safe-bottom>
  */
-const props = withDefaults(
-    defineProps<{
-        customStyle?: string | CSSProperties;
-    }>(),
-    {
-        customStyle: () => ({})
-    }
-);
+const props = defineProps(SafeBottomProps);
 
 const isNVue = ref(false);
 
 const style = computed(() => {
-    let r: CSSProperties = {};
+    let result: CSSProperties = {};
     // #ifdef APP-NVUE || MP-TOUTIAO
     // nvue下，高度使用js计算填充
-    r.height = addUnit(sys().safeAreaInsets.bottom, 'px');
+    result.height = $u.addUnit($u.sys().safeAreaInsets.bottom, 'px');
     // #endif
-    return deepMerge(r, mergeStyles(props.customStyle));
+    return result;
 });
 
 onMounted(() => {