uview-pro 0.5.14 → 0.5.16

package/components/u-icon/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { IconLabelPosition, ImgMode } from '../../types/global';
-import { baseProps } from '../common/props';
 
 /**
  * u-icon 组件 Props 类型定义
  */
 export const IconProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 图标名称，见示例图标集 */
     name: { type: String, default: '' },
     /** 图标颜色，可接受主题色 */

package/components/u-image/types.ts

@@ -1,10 +1,18 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
 import type { ImgMode, Shape } from '../../types/global';
-import { baseProps } from '../common/props';
 
 // 定义 ImageProps 的类型
 export const ImageProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 图片地址 */
     src: { type: String, default: '' },
     /** 裁剪模式 */

package/components/u-index-anchor/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-index-anchor 组件 Props 类型定义
  * @description 索引锚点属性
  */
 export const IndexAnchorProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否使用自定义内容的插槽 */
     useSlot: { type: Boolean, default: false },
     /** 索引字符，如果定义了use-slot，此参数自动失效 */

package/components/u-input/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { InputAlign, InputConfirmType, InputType } from '../../types/global';
-import { baseProps } from '../common/props';
+import type { InputAlign, InputConfirmType, InputType, SizeType } from '../../types/global';
 import { useLocale } from '../../';
 
 const { t } = useLocale();
@@ -11,7 +10,16 @@ const { t } = useLocale();
  */
 
 export const InputProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 用于双向绑定输入框的值 */
     modelValue: {
         type: [String, Number] as PropType<string | number>,
@@ -27,6 +35,11 @@ export const InputProps = {
         type: String as PropType<InputAlign>,
         default: 'left'
     },
+    /** 输入框文字的大小(默认default)，支持 small/default/large 预设值，也支持 16/16px/16rpx 等自定义值 */
+    size: {
+        type: [String, Number] as PropType<SizeType | string | number>,
+        default: ''
+    },
     /** placeholder显示值(默认 '请输入内容') */
     placeholder: {
         type: String,

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

@@ -21,7 +21,7 @@
             :style="getStyle"
             :value="inputValue"
             :placeholder="placeholder"
-            :placeholderStyle="placeholderStyle"
+            :placeholderStyle="getPlaceholderStyle"
             :disabled="disabled"
             :maxlength="inputMaxlength"
             :fixed="fixed"
@@ -46,7 +46,7 @@
             :value="inputValue"
             :password="type == 'password' && !showPassword"
             :placeholder="placeholder"
-            :placeholderStyle="placeholderStyle"
+            :placeholderStyle="getPlaceholderStyle"
             :disabled="disabled || type === 'select'"
             :maxlength="inputMaxlength"
             :focus="focus"
@@ -65,17 +65,20 @@
         <view class="u-input__right-icon u-flex">
             <view
                 class="u-input__right-icon__clear u-input__right-icon__item"
-                v-if="clearIconShow"
+                v-if="clearable && inputValue !== '' && !disabled"
+                :style="{ marginLeft: $u.addUnit(iconSpacing) }"
+                :class="{ 'u-hidden': !focused && type !== 'select' }"
                 @click.stop="onClear"
             >
-                <u-icon size="32" name="close-circle-fill" color="var(--u-light-color)" />
+                <u-icon :size="currentIconSize" name="close-circle-fill" color="var(--u-light-color)" />
             </view>
             <view
                 class="u-input__right-icon__clear u-input__right-icon__item"
                 v-if="passwordIcon && type == 'password'"
+                :style="{ marginLeft: $u.addUnit(iconSpacing) }"
             >
                 <u-icon
-                    size="32"
+                    :size="currentIconSize"
                     :name="!showPassword ? 'eye' : 'eye-fill'"
                     color="var(--u-light-color)"
                     @click="showPassword = !showPassword"
@@ -87,8 +90,9 @@
                 :class="{
                     'u-input__right-icon--select--reverse': selectOpen
                 }"
+                :style="{ marginLeft: $u.addUnit(iconSpacing) }"
             >
-                <u-icon name="arrow-down-fill" size="26" color="var(--u-light-color)"></u-icon>
+                <u-icon name="arrow-down-fill" :size="selectIconSize" color="var(--u-light-color)"></u-icon>
             </view>
         </view>
         <text
@@ -120,30 +124,92 @@ export default {
 import { ref, computed, watch } from 'vue';
 import { $u, useChildren } from '../..';
 import { InputProps } from './types';
+import type { SizeType } from '../../types/global';
 
 const props = defineProps(InputProps);
 const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'confirm', 'click']);
 
 const { emitToParent } = useChildren('u-input', 'u-form-item');
+const { parentExposed } = useChildren('u-input', 'u-form');
 
-const inputHeight = 70; // input的高度
-const textareaHeight = 100; // textarea的高度
 const validateState = ref(props.validateState); // 当前input的验证状态，用于错误时，边框是否改为红色
 const focused = ref(false); // 当前是否处于获得焦点的状态
 const showPassword = ref(false); // 是否预览密码
 const lastValue = ref(''); // 用于头条小程序，判断@input中，前后的值是否发生了变化
 
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: {
+        inputHeight: 56,
+        textareaHeight: 70,
+        fontSize: 24,
+        iconSize: 28,
+        iconSpacing: 6
+    },
+    default: {
+        inputHeight: 70,
+        textareaHeight: 100,
+        fontSize: 28,
+        iconSize: 32,
+        iconSpacing: 10
+    },
+    large: {
+        inputHeight: 84,
+        textareaHeight: 130,
+        fontSize: 32,
+        iconSize: 36,
+        iconSpacing: 14
+    }
+};
+
+// 获取实际使用的 size 值（优先级：props.size > u-form.size）
+const actualSize = computed(() => {
+    // 优先使用 props 的 size 属性
+    if (props.size !== '') {
+        return String(props.size);
+    }
+    // 次优先：使用 u-form 的 size 属性（u-form 的 size 只支持预设值）
+    if (parentExposed.value?.props?.size) {
+        return String(parentExposed.value.props.size);
+    }
+    // 默认值
+    return 'default';
+});
+
+// 判断实际使用的 size 是否在预设配置中
+const isInSizeConfig = computed(() => actualSize.value in sizeConfig);
+
+// 获取预设 size（用于查找 sizeConfig 配置，如图标大小、高度等）
+const presetSize = computed(() => {
+    return (isInSizeConfig.value ? actualSize.value : 'default') as SizeType;
+});
+
+// 获取当前尺寸配置
+const currentSizeConfig = computed(() => sizeConfig[presetSize.value]);
+
+// 获取实际要使用的 font-size（如果是预设值使用配置值，否则作为自定义值处理）
+const actualFontSize = computed(() => {
+    if (isInSizeConfig.value) {
+        return $u.addUnit(currentSizeConfig.value.fontSize);
+    }
+    // 自定义size值，直接作为fontSize处理
+    return $u.addUnit(actualSize.value);
+});
+
+// 计算当前图标大小
+const currentIconSize = computed(() => currentSizeConfig.value.iconSize);
+
+// 计算 select 图标大小（比常规图标稍小）
+const selectIconSize = computed(() => currentSizeConfig.value.iconSize - 4);
+
+// 计算图标间距
+const iconSpacing = computed(() => currentSizeConfig.value.iconSpacing);
+
 const inputValue = computed<string>(() => {
     if (props.modelValue === undefined || props.modelValue === null) return '';
     return String(props.modelValue);
 });
 
-// 清除图标是否显示
-const clearIconShow = computed(() => {
-    if (props.type === 'select') return props.clearable && inputValue.value !== '' && !props.disabled;
-    return props.clearable && focused.value && inputValue.value !== '' && !props.disabled;
-});
-
 // 监听 value 变化
 watch(
     () => inputValue.value,
@@ -168,12 +234,25 @@ const getStyle = computed(() => {
     let style: Record<string, any> = {};
     // 如果没有自定义高度，就根据type为input还是textarea来分配一个默认的高度
     style.minHeight = props.height
-        ? props.height + 'rpx'
-        : props.type == 'textarea'
-          ? `${textareaHeight}rpx`
-          : `${inputHeight}rpx`;
+        ? $u.addUnit(props.height)
+        : props.type === 'textarea'
+          ? $u.addUnit(currentSizeConfig.value.textareaHeight)
+          : $u.addUnit(currentSizeConfig.value.inputHeight);
+    // 根据 size 属性设置字体大小
+    style.fontSize = actualFontSize.value;
     return $u.toStyle(style, props.customStyle);
 });
+
+const getPlaceholderStyle = computed(() => {
+    return $u.toStyle(
+        {
+            fontSize: actualFontSize.value
+        },
+        props.placeholderStyle
+    );
+});
+
+// 计算光标与键盘的距离
 const getCursorSpacing = computed(() => Number(props.cursorSpacing));
 // 光标起始位置
 const uSelectionStart = computed(() => String(props.selectionStart));
@@ -264,6 +343,7 @@ defineExpose({
     position: relative;
     flex: 1;
     @include vue-flex;
+    align-items: center;
 
     &__select-overlay {
         position: absolute;
@@ -276,6 +356,8 @@ defineExpose({
         font-size: 28rpx;
         color: $u-main-color;
         flex: 1;
+        align-self: center;
+        line-height: normal;
     }
 
     &__textarea {
@@ -313,10 +395,6 @@ defineExpose({
         position: relative;
         z-index: 2;
 
-        &__item {
-            margin-left: 10rpx;
-        }
-
         &--select {
             transition: transform 0.4s;
 

package/components/u-loading/types.ts

@@ -1,5 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 type LoadingMode = 'circle' | 'flower';
 
@@ -8,7 +7,16 @@ type LoadingMode = 'circle' | 'flower';
  * @description 加载动画，支持多种模式
  */
 export const LoadingProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 动画的类型 */
     mode: {
         type: String as PropType<LoadingMode>,

package/components/u-loadmore/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { LoadmoreIconType, LoadmoreStatus, LoadmoreText } from '../../types/global';
-import { baseProps } from '../common/props';
 import { useLocale } from '../../';
 
 const { t } = useLocale();
@@ -11,7 +10,16 @@ const { t } = useLocale();
  */
 
 export const LoadmoreProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 组件背景色 */
     bgColor: {
         type: String,

package/components/u-mask/types.ts

@@ -1,12 +1,20 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { baseProps } from '../common/props';
 
 /**
  * u-mask 组件 props 类型定义
  * @description 遮罩层，支持自定义样式、缩放、动画等
  */
 export const MaskProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否显示遮罩 */
     show: {
         type: Boolean,

package/components/u-message-input/types.ts

@@ -1,14 +1,22 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { InputType, MessageInputMode } from '../../types/global';
 import { getColor } from '../../';
-import { baseProps } from '../common/props';
 
 /**
  * u-message-input 组件 props 类型定义
  * @description 验证码/短信输入框，支持多种样式
  */
 export const MessageInputProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 输入框的类型，textarea，text，number */
     type: {
         type: String as PropType<InputType>,

package/components/u-modal/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { getColor, useLocale } from '../../';
-import { baseProps } from '../common/props';
 
 const { t } = useLocale();
 
@@ -9,7 +8,16 @@ const { t } = useLocale();
  * @description 弹窗模态框，支持多种样式和交互
  */
 export const ModalProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 是否显示模态框 */
     modelValue: {
         type: Boolean,

package/components/u-pagination/types.ts

@@ -1,6 +1,6 @@
-import { baseProps } from '../common/props';
 import type { PaginationChangePayload } from '../../types/global';
 import { useLocale } from '../../';
+import type { PropType } from 'vue';
 
 const { t } = useLocale();
 
@@ -10,7 +10,16 @@ const { t } = useLocale();
  */
 
 export const PaginationProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 左侧按钮文字 */
     prevText: { type: String, default: () => t('uPagination.prevText') },
     /** 右侧按钮文字 */

package/components/u-picker/types.ts

@@ -2,7 +2,6 @@ import type { ExtractPropTypes, PropType } from 'vue';
 import type { PickerMode, PickerParams } from '../../types/global';
 import { getColor, useLocale } from '../../';
 import zIndex from '../../libs/config/zIndex';
-import { baseProps } from '../common/props';
 
 const { t } = useLocale();
 
@@ -23,7 +22,16 @@ const defaultParams: PickerParams = {
  * @description 支持时间、地区、单列、多列等多种模式
  */
 export const PickerProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** picker中需要显示的参数 */
     params: {
         type: Object as PropType<PickerParams>,

package/components/u-popup/types.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { PopupCloseIconPos, PopupMode } from '../../types/global';
-import { baseProps } from '../common/props';
 import zIndex from '../../libs/config/zIndex';
 
 /**
@@ -8,7 +7,16 @@ import zIndex from '../../libs/config/zIndex';
  * @description 弹出层容器，支持多种弹出方向和自定义内容
  */
 export const PopupProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     /** 显示状态 */
     show: { type: Boolean, default: false },
     /** 弹出方向，left|right|top|bottom|center */

package/components/u-radio/types.ts

@@ -1,13 +1,21 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { Shape } from '../../types/global';
-import { baseProps } from '../common/props';
+import type { Shape, SizeType } from '../../types/global';
 
 /**
  * RadioProps 单选框 props 类型定义
  * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
  */
 export const RadioProps = {
-    ...baseProps,
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
     label: { type: String, default: '' },
     value: { type: [String, Number] as PropType<string | number>, default: '' },
     /** radio的名称 */
@@ -23,7 +31,9 @@ export const RadioProps = {
     /** 图标的大小，单位rpx */
     iconSize: { type: [String, Number] as PropType<number | string>, default: '' },
     /** label的字体大小，rpx单位 */
-    labelSize: { type: [String, Number] as PropType<number | string>, default: '' }
+    labelSize: { type: [String, Number] as PropType<number | string>, default: '' },
+    /** 组件的整体大小 */
+    size: { type: [String, Number] as PropType<SizeType | string | number>, default: '' }
 };
 
 export type RadioProps = ExtractPropTypes<typeof RadioProps>;