uview-pro 0.2.0 → 0.2.2

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

@@ -1,123 +1,123 @@
-<template>
-    <view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent @tap.stop.prevent>
-        <block v-if="!slots.default && !slots.$default">
-            <scroll-view scroll-y="true" :style="{ height: $u.addUnit(height) }">
-                <view class="u-dropdown-item__options">
-                    <u-cell-group>
-                        <u-cell-item
-                            @click="cellClick(item.value)"
-                            :arrow="false"
-                            :title="item.label"
-                            v-for="(item, index) in options"
-                            :key="index"
-                            :title-style="{ color: modelValue == item.value ? activeColor : inactiveColor }"
-                        >
-                            <u-icon v-if="modelValue == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
-                        </u-cell-item>
-                    </u-cell-group>
-                </view>
-            </scroll-view>
-        </block>
-        <slot v-else />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance, useSlots, watch } from 'vue';
-import { $u } from '../..';
-import { DropdownItemProps } from './types';
-
-defineOptions({ name: 'u-dropdown-item' });
-
-/**
- * dropdown-item 下拉菜单
- * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
- * @tutorial https://uviewpro.cn/zh/components/dropdown.html
- * @property {String | Number} v-model 双向绑定选项卡选择值
- * @property {String} title 菜单项标题
- * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
- * @property {Boolean} disabled 是否禁用此选项卡（默认false）
- * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
- * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
- * @example <u-dropdown-item title="标题"></u-dropdown-item>
- */
-
-// props 定义
-const props = defineProps(DropdownItemProps);
-
-// emits 定义
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 插槽
-const slots = useSlots();
-
-// 当前项是否处于展开状态
-const active = ref(false);
-// 激活时左边文字和右边对勾图标的颜色
-const activeColor = ref<string>('#2979ff');
-// 未激活时左边文字和右边对勾图标的颜色
-const inactiveColor = ref<string>('#606266');
-// 父组件实例
-const parent = ref<any>(null);
-
-// 监听props变化，通知父组件重新初始化
-const propsChange = computed(() => `${props.title}-${props.disabled}`);
-
-// 监听propsChange变化，通知父组件重新init
-watch(propsChange, () => {
-    if (parent.value && parent.value.init) parent.value.init();
-});
-
-/**
- * 初始化本组件，注册到父组件
- */
-function init() {
-    // 获取父组件u-dropdown
-    const instance = getCurrentInstance();
-    if (!instance) return;
-    const parentComp = $u.$parent('u-dropdown');
-    if (parentComp && parentComp.proxy) {
-        const parentProxy = parentComp.proxy as any;
-        parent.value = parentComp;
-        // 继承父组件的激活/未激活颜色
-        activeColor.value = parentProxy.activeColor;
-        inactiveColor.value = parentProxy.inactiveColor;
-        // 注册到父组件children
-        // 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
-        // push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
-        const exist = parentComp?.exposed?.children.value.find((val: any) => val === instance);
-        if (!exist) parentComp?.exposed?.children.value.push(instance);
-        if (parentComp?.exposed?.children.value.length === 1) active.value = true;
-        // 向父组件menuList注册本项
-        // 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
-        parentComp?.exposed?.menuList.value.push({ title: props.title, disabled: props.disabled });
-    }
-}
-
-/**
- * cell被点击
- * @param value 选中值
- */
-function cellClick(value: string | number | any) {
-    // 修改通过v-model绑定的值
-    emit('update:modelValue', value);
-    // 通知父组件(u-dropdown)收起菜单
-    parent.value?.exposed?.close();
-    // 发出事件，抛出当前勾选项的value
-    emit('change', value);
-}
-
-function setActive(value: boolean) {
-    active.value = value;
-}
-
-onMounted(() => {
-    init();
-});
-
-defineExpose({ init, cellClick, setActive });
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-</style>
+<template>
+    <view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent @tap.stop.prevent>
+        <block v-if="!slots.default && !slots.$default">
+            <scroll-view scroll-y="true" :style="{ height: $u.addUnit(height) }">
+                <view class="u-dropdown-item__options">
+                    <u-cell-group>
+                        <u-cell-item
+                            @click="cellClick(item.value)"
+                            :arrow="false"
+                            :title="item.label"
+                            v-for="(item, index) in options"
+                            :key="index"
+                            :title-style="{ color: modelValue == item.value ? activeColor : inactiveColor }"
+                        >
+                            <u-icon v-if="modelValue == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
+                        </u-cell-item>
+                    </u-cell-group>
+                </view>
+            </scroll-view>
+        </block>
+        <slot v-else />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance, useSlots, watch } from 'vue';
+import { $u } from '../..';
+import { DropdownItemProps } from './types';
+
+defineOptions({ name: 'u-dropdown-item' });
+
+/**
+ * dropdown-item 下拉菜单
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ * @tutorial https://uviewpro.cn/zh/components/dropdown.html
+ * @property {String | Number} v-model 双向绑定选项卡选择值
+ * @property {String} title 菜单项标题
+ * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+ * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+ * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+ * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+ * @example <u-dropdown-item title="标题"></u-dropdown-item>
+ */
+
+// props 定义
+const props = defineProps(DropdownItemProps);
+
+// emits 定义
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 插槽
+const slots = useSlots();
+
+// 当前项是否处于展开状态
+const active = ref(false);
+// 激活时左边文字和右边对勾图标的颜色
+const activeColor = ref<string>('#2979ff');
+// 未激活时左边文字和右边对勾图标的颜色
+const inactiveColor = ref<string>('#606266');
+// 父组件实例
+const parent = ref<any>(null);
+
+// 监听props变化，通知父组件重新初始化
+const propsChange = computed(() => `${props.title}-${props.disabled}`);
+
+// 监听propsChange变化，通知父组件重新init
+watch(propsChange, () => {
+    if (parent.value && parent.value.init) parent.value.init();
+});
+
+/**
+ * 初始化本组件，注册到父组件
+ */
+function init() {
+    // 获取父组件u-dropdown
+    const instance = getCurrentInstance();
+    if (!instance) return;
+    const parentComp = $u.$parent('u-dropdown');
+    if (parentComp && parentComp.proxy) {
+        const parentProxy = parentComp.proxy as any;
+        parent.value = parentComp;
+        // 继承父组件的激活/未激活颜色
+        activeColor.value = parentProxy.activeColor;
+        inactiveColor.value = parentProxy.inactiveColor;
+        // 注册到父组件children
+        // 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
+        // push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
+        const exist = parentComp?.exposed?.children.value.find((val: any) => val === instance);
+        if (!exist) parentComp?.exposed?.children.value.push(instance);
+        if (parentComp?.exposed?.children.value.length === 1) active.value = true;
+        // 向父组件menuList注册本项
+        // 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
+        parentComp?.exposed?.menuList.value.push({ title: props.title, disabled: props.disabled });
+    }
+}
+
+/**
+ * cell被点击
+ * @param value 选中值
+ */
+function cellClick(value: string | number | any) {
+    // 修改通过v-model绑定的值
+    emit('update:modelValue', value);
+    // 通知父组件(u-dropdown)收起菜单
+    parent.value?.exposed?.close();
+    // 发出事件，抛出当前勾选项的value
+    emit('change', value);
+}
+
+function setActive(value: boolean) {
+    active.value = value;
+}
+
+onMounted(() => {
+    init();
+});
+
+defineExpose({ init, cellClick, setActive });
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+</style>

package/components/u-empty/types.ts

@@ -1,36 +1,36 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-empty 组件 Props 类型定义
- */
-export const EmptyProps = {
-    /** 图标路径 */
-    src: { type: String, default: '' },
-    /** 提示文字 */
-    text: { type: String, default: '' },
-    /** 文字颜色 */
-    color: { type: String, default: '#c0c4cc' },
-    /** 图标的颜色 */
-    iconColor: { type: String, default: '#c0c4cc' },
-    /** 图标的大小 */
-    iconSize: { type: [String, Number] as PropType<string | number>, default: 120 },
-    /** 文字大小，单位rpx */
-    fontSize: { type: [String, Number] as PropType<string | number>, default: 26 },
-    /** 选择预置的图标类型 */
-    mode: { type: String, default: 'data' },
-    /** 图标宽度，单位rpx */
-    imgWidth: { type: [String, Number] as PropType<string | number>, default: 120 },
-    /** 图标高度，单位rpx */
-    imgHeight: { type: [String, Number] as PropType<string | number>, default: 'auto' },
-    /** 是否显示组件 */
-    show: { type: Boolean, default: true },
-    /** 组件距离上一个元素之间的距离 */
-    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
-    /** 图标自定义样式 */
-    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
-};
-
-/**
- * u-empty 组件 Props 类型
- */
-export type EmptyProps = ExtractPropTypes<typeof EmptyProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-empty 组件 Props 类型定义
+ */
+export const EmptyProps = {
+    /** 图标路径 */
+    src: { type: String, default: '' },
+    /** 提示文字 */
+    text: { type: String, default: '' },
+    /** 文字颜色 */
+    color: { type: String, default: '#c0c4cc' },
+    /** 图标的颜色 */
+    iconColor: { type: String, default: '#c0c4cc' },
+    /** 图标的大小 */
+    iconSize: { type: [String, Number] as PropType<string | number>, default: 120 },
+    /** 文字大小，单位rpx */
+    fontSize: { type: [String, Number] as PropType<string | number>, default: 26 },
+    /** 选择预置的图标类型 */
+    mode: { type: String, default: 'data' },
+    /** 图标宽度，单位rpx */
+    imgWidth: { type: [String, Number] as PropType<string | number>, default: 120 },
+    /** 图标高度，单位rpx */
+    imgHeight: { type: [String, Number] as PropType<string | number>, default: 'auto' },
+    /** 是否显示组件 */
+    show: { type: Boolean, default: true },
+    /** 组件距离上一个元素之间的距离 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 图标自定义样式 */
+    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+/**
+ * u-empty 组件 Props 类型
+ */
+export type EmptyProps = ExtractPropTypes<typeof EmptyProps>;

package/components/u-empty/u-empty.vue

@@ -1,88 +1,88 @@
-<template>
-    <view class="u-empty" v-if="show" :style="{ marginTop: marginTop + 'rpx' }">
-        <u-icon
-            :name="src ? src : 'empty-' + mode"
-            :custom-style="iconStyle"
-            :label="text ? text : icons[mode]"
-            label-pos="bottom"
-            :label-color="color"
-            :label-size="fontSize"
-            :size="iconSize"
-            :color="iconColor"
-            margin-top="14"
-        ></u-icon>
-        <view class="u-slot-wrap">
-            <slot name="bottom"></slot>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { EmptyProps } from './types';
-
-defineOptions({
-    name: 'u-empty'
-});
-
-/**
- * empty 内容为空
- * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
- * @tutorial https://uviewpro.cn/zh/components/empty.html
- * @property {String} color 文字颜色（默认#c0c4cc）
- * @property {String} text 文字提示（默认“无内容”）
- * @property {String} src 自定义图标路径，如定义，mode参数会失效
- * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
- * @property {String} mode 内置的图标，见官网说明（默认data）
- * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
- * @property {String} img-height 图标的高度，单位rpx（默认auto）
- * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
- * @property {Boolean} show 是否显示组件（默认true）
- * @event {Function} click 点击组件时触发
- * @event {Function} close 点击关闭按钮时触发
- * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
- */
-const props = defineProps(EmptyProps);
-
-/**
- * 预置图标对应的提示文字
- */
-const icons: Record<string, string> = {
-    car: '购物车为空',
-    page: '页面不存在',
-    search: '没有搜索结果',
-    address: '没有收货地址',
-    wifi: '没有WiFi',
-    order: '订单为空',
-    coupon: '没有优惠券',
-    favor: '暂无收藏',
-    permission: '无权限',
-    history: '无历史记录',
-    news: '无新闻列表',
-    message: '消息列表为空',
-    list: '列表为空',
-    data: '数据为空'
-};
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-empty {
-    @include vue-flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-}
-
-.u-image {
-    margin-bottom: 20rpx;
-}
-
-.u-slot-wrap {
-    @include vue-flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20rpx;
-}
-</style>
+<template>
+    <view class="u-empty" v-if="show" :style="{ marginTop: marginTop + 'rpx' }">
+        <u-icon
+            :name="src ? src : 'empty-' + mode"
+            :custom-style="iconStyle"
+            :label="text ? text : icons[mode]"
+            label-pos="bottom"
+            :label-color="color"
+            :label-size="fontSize"
+            :size="iconSize"
+            :color="iconColor"
+            margin-top="14"
+        ></u-icon>
+        <view class="u-slot-wrap">
+            <slot name="bottom"></slot>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { EmptyProps } from './types';
+
+defineOptions({
+    name: 'u-empty'
+});
+
+/**
+ * empty 内容为空
+ * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+ * @tutorial https://uviewpro.cn/zh/components/empty.html
+ * @property {String} color 文字颜色（默认#c0c4cc）
+ * @property {String} text 文字提示（默认“无内容”）
+ * @property {String} src 自定义图标路径，如定义，mode参数会失效
+ * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
+ * @property {String} mode 内置的图标，见官网说明（默认data）
+ * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
+ * @property {String} img-height 图标的高度，单位rpx（默认auto）
+ * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
+ * @property {Boolean} show 是否显示组件（默认true）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 点击关闭按钮时触发
+ * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
+ */
+const props = defineProps(EmptyProps);
+
+/**
+ * 预置图标对应的提示文字
+ */
+const icons: Record<string, string> = {
+    car: '购物车为空',
+    page: '页面不存在',
+    search: '没有搜索结果',
+    address: '没有收货地址',
+    wifi: '没有WiFi',
+    order: '订单为空',
+    coupon: '没有优惠券',
+    favor: '暂无收藏',
+    permission: '无权限',
+    history: '无历史记录',
+    news: '无新闻列表',
+    message: '消息列表为空',
+    list: '列表为空',
+    data: '数据为空'
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-empty {
+    @include vue-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.u-image {
+    margin-bottom: 20rpx;
+}
+
+.u-slot-wrap {
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20rpx;
+}
+</style>

package/components/u-field/types.ts

@@ -1,69 +1,69 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { InputAlign, InputConfirmType, InputLabelPosition, InputType } from '../../types/global';
-
-/**
- * u-field 组件 Props 类型定义
- * @description 表单输入框属性
- */
-export const FieldProps = {
-    /** label左边的图标，限uView的图标名称 */
-    icon: String,
-    /** 输入框右边的图标名称，限uView的图标名称（默认false） */
-    rightIcon: String,
-    /** 方向属性 */
-    arrowDirection: { type: String, default: 'right' },
-    /** 是否必填，左边显示红色"*"号（默认false） */
-    required: Boolean,
-    /** 输入框左边的文字提示 */
-    label: String,
-    /** 是否密码输入方式(用点替换文字)，type为text时有效（默认false） */
-    password: Boolean,
-    /** 是否显示右侧清空内容的图标控件（默认true） */
-    clearable: { type: Boolean, default: true },
-    /** label的宽度，单位rpx（默认130） */
-    labelWidth: { type: [Number, String] as PropType<string | number>, default: 130 },
-    /** label的文字对齐方式（默认left） */
-    labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
-    /** 输入框内容对齐方式（默认left） */
-    inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
-    /** 左边通过icon配置的图标的颜色（默认#606266） */
-    iconColor: { type: String, default: '#606266' },
-    /** 是否自动增高输入区域，type为textarea时有效（默认true） */
-    autoHeight: { type: Boolean, default: true },
-    /** 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 */
-    errorMessage: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
-    /** 输入框的提示文字 */
-    placeholder: String,
-    /** placeholder的样式(内联样式，字符串)，如"color: #ddd" */
-    placeholderStyle: String,
-    /** 是否自动获得焦点（默认false） */
-    focus: Boolean,
-    /** 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false） */
-    fixed: Boolean,
-    /** 输入框绑定值 */
-    modelValue: [Number, String],
-    /** 输入框类型（text/textarea/password等，默认text） */
-    type: { type: String as PropType<InputType>, default: 'text' },
-    /** 是否不可输入（默认false） */
-    disabled: { type: Boolean, default: false },
-    /** 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） */
-    maxlength: { type: [Number, String] as PropType<string | number>, default: 140 },
-    /** 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） */
-    confirmType: { type: String as PropType<InputConfirmType>, default: 'done' },
-    /** label位置（默认left）left-左边，top-上边 */
-    labelPosition: { type: String as PropType<InputLabelPosition>, default: 'left' },
-    /** 自定义输入框的样式，对象形式 */
-    fieldStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 清除图标的大小，单位rpx（默认30） */
-    clearSize: { type: [Number, String] as PropType<string | number>, default: 30 },
-    /** 左侧图标样式 */
-    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 是否显示field的上边框（默认false） */
-    borderTop: { type: Boolean, default: false },
-    /** 是否显示field的下边框（默认true） */
-    borderBottom: { type: Boolean, default: true },
-    /** 是否自动去除输入内容首尾空格（默认true） */
-    trim: { type: Boolean, default: true }
-};
-
-export type FieldProps = ExtractPropTypes<typeof FieldProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign, InputConfirmType, InputLabelPosition, InputType } from '../../types/global';
+
+/**
+ * u-field 组件 Props 类型定义
+ * @description 表单输入框属性
+ */
+export const FieldProps = {
+    /** label左边的图标，限uView的图标名称 */
+    icon: String,
+    /** 输入框右边的图标名称，限uView的图标名称（默认false） */
+    rightIcon: String,
+    /** 方向属性 */
+    arrowDirection: { type: String, default: 'right' },
+    /** 是否必填，左边显示红色"*"号（默认false） */
+    required: Boolean,
+    /** 输入框左边的文字提示 */
+    label: String,
+    /** 是否密码输入方式(用点替换文字)，type为text时有效（默认false） */
+    password: Boolean,
+    /** 是否显示右侧清空内容的图标控件（默认true） */
+    clearable: { type: Boolean, default: true },
+    /** label的宽度，单位rpx（默认130） */
+    labelWidth: { type: [Number, String] as PropType<string | number>, default: 130 },
+    /** label的文字对齐方式（默认left） */
+    labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 输入框内容对齐方式（默认left） */
+    inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 左边通过icon配置的图标的颜色（默认#606266） */
+    iconColor: { type: String, default: '#606266' },
+    /** 是否自动增高输入区域，type为textarea时有效（默认true） */
+    autoHeight: { type: Boolean, default: true },
+    /** 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 */
+    errorMessage: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 输入框的提示文字 */
+    placeholder: String,
+    /** placeholder的样式(内联样式，字符串)，如"color: #ddd" */
+    placeholderStyle: String,
+    /** 是否自动获得焦点（默认false） */
+    focus: Boolean,
+    /** 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false） */
+    fixed: Boolean,
+    /** 输入框绑定值 */
+    modelValue: [Number, String],
+    /** 输入框类型（text/textarea/password等，默认text） */
+    type: { type: String as PropType<InputType>, default: 'text' },
+    /** 是否不可输入（默认false） */
+    disabled: { type: Boolean, default: false },
+    /** 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） */
+    maxlength: { type: [Number, String] as PropType<string | number>, default: 140 },
+    /** 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） */
+    confirmType: { type: String as PropType<InputConfirmType>, default: 'done' },
+    /** label位置（默认left）left-左边，top-上边 */
+    labelPosition: { type: String as PropType<InputLabelPosition>, default: 'left' },
+    /** 自定义输入框的样式，对象形式 */
+    fieldStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 清除图标的大小，单位rpx（默认30） */
+    clearSize: { type: [Number, String] as PropType<string | number>, default: 30 },
+    /** 左侧图标样式 */
+    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示field的上边框（默认false） */
+    borderTop: { type: Boolean, default: false },
+    /** 是否显示field的下边框（默认true） */
+    borderBottom: { type: Boolean, default: true },
+    /** 是否自动去除输入内容首尾空格（默认true） */
+    trim: { type: Boolean, default: true }
+};
+
+export type FieldProps = ExtractPropTypes<typeof FieldProps>;