@ebiz/designer-components 0.1.1 → 0.1.4

package/src/components/senior/EbizSForm/item.vue

@@ -1,513 +1,513 @@
-<template>
-    <t-form-item :class="['ebiz-s-form-item', className]" :for="forAttr" :help="help" :label="label" :name="name"
-        :style="customStyle" :rules="rules" :label-width="labelWidth" :label-align="labelAlign" :status="status"
-        @validate="handleValidate" style="margin-bottom: 10px;">
-        <!-- 输入框 -->
-        <template v-if="type === 'input'">
-            <t-input v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
-                :readonly="readonly" :clearable="clearable" :max-length="maxLength" :max-character="maxCharacter"
-                :show-limit-number="showLimitNumber" @change="handleChange" />
-        </template>
-
-        <!-- 数字输入框 -->
-        <template v-else-if="type === 'number'">
-            <t-input-number v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
-                :readonly="readonly" :max="max" :min="min" :step="step" :format="format" @change="handleChange" />
-        </template>
-
-        <!-- 文本域 -->
-        <template v-else-if="type === 'textarea'">
-            <t-textarea v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
-                :readonly="readonly" :autosize="autosize" :maxlength="maxLength" :max-character="maxCharacter"
-                :show-limit-number="showLimitNumber" @change="handleChange" />
-        </template>
-
-        <!-- 选择器 -->
-        <template v-else-if="type === 'select'">
-            <template v-if="isRemote">
-                <ebiz-remote-select v-model="computedModelValue" :placeholder="placeholder || '请选择'"
-                    :disabled="disabled" :clearable="clearable" :filterable="true" :multiple="multiple"
-                    :loading="loading" :apiConfig="remoteApiConfig" @change="handleChange" />
-            </template>
-            <template v-else>
-                <t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
-                    :disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
-                    :loading="loading" @change="handleChange" />
-            </template>
-        </template>
-
-        <!-- 日期选择器 -->
-        <template v-else-if="type === 'datetime'">
-            <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间'" :disabled="disabled"
-                :clearable="clearable" enable-time-picker format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
-        </template>
-
-
-        <!-- 日期选择器 -->
-        <template v-else-if="type === 'date'">
-            <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期'" :disabled="disabled"
-                :clearable="clearable" :format="dateFormat || 'YYYY-MM-DD'" :mode="dateMode || 'date'"
-                @change="handleChange" />
-        </template>
-
-        <!-- 时间选择器 -->
-        <template v-else-if="type === 'time'">
-            <t-time-picker v-model="computedModelValue" :placeholder="placeholder || '请选择时间'" :disabled="disabled"
-                :clearable="clearable" :format="timeFormat || 'HH:mm:ss'" @change="handleChange" />
-        </template>
-
-        <!-- 单选框组 -->
-        <template v-else-if="type === 'radio'">
-            <t-radio-group v-model="computedModelValue" :disabled="disabled" :options="options"
-                @change="handleChange" />
-        </template>
-
-        <!-- 复选框组 -->
-        <template v-else-if="type === 'checkbox'">
-            <t-checkbox-group v-model="computedModelValue" :disabled="disabled" :options="options" :max="max"
-                @change="handleChange" />
-        </template>
-
-        <!-- 开关 -->
-        <template v-else-if="type === 'switch'">
-            <t-switch v-model="computedModelValue" :disabled="disabled" @change="handleChange" />
-        </template>
-
-        <!-- 滑块 -->
-        <template v-else-if="type === 'slider'">
-            <t-slider v-model="computedModelValue" :disabled="disabled" :max="max" :min="min" :step="step"
-                :range="range" :marks="marks" @change="handleChange" />
-        </template>
-
-        <!-- 上传 -->
-        <template v-else-if="type === 'upload'">
-            <ebiz-upload v-model="computedModelValue" :disabled="disabled" :accept="accept" :multiple="multiple"
-                :max="max" :theme="uploadTheme || 'file'" @change="handleChange" />
-        </template>
-
-        <!-- 级联选择器 -->
-        <template v-else-if="type === 'cascader'">
-            <t-cascader v-model="computedModelValue" :disabled="disabled" :options="options"
-                :placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable" :multiple="multiple"
-                @change="handleChange" />
-        </template>
-
-        <!-- 树形选择器 -->
-        <template v-else-if="type === 'tree-select'">
-            <t-tree-select v-model="computedModelValue" :disabled="disabled" :data="treeData || options"
-                :placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable" :multiple="multiple"
-                @change="handleChange" />
-        </template>
-
-        <!-- 颜色选择器 -->
-        <template v-else-if="type === 'color-picker'">
-            <t-color-picker v-model="computedModelValue" :disabled="disabled" :clearable="clearable"
-                @change="handleChange" />
-        </template>
-
-        <!-- 默认插槽，用于自定义控件 -->
-        <template v-else>
-            <slot>
-                <div class="custom-control">
-                    <slot name="default"></slot>
-                </div>
-            </slot>
-        </template>
-    </t-form-item>
-</template>
-
-<script>
-/**
- * @displayName PC端表单项
- * @description PC端表单项组件，基于TDesign FormItem封装，支持多种控件类型
- * @category 表单组件
- * @name EbizSFormItem
- */
-export default {
-    name: "EbizSFormItem"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import {
-    FormItem as TFormItem,
-    Input as TInput,
-    InputNumber as TInputNumber,
-    Textarea as TTextarea,
-    Select as TSelect,
-    DatePicker as TDatePicker,
-    TimePicker as TTimePicker,
-    RadioGroup as TRadioGroup,
-    CheckboxGroup as TCheckboxGroup,
-    Switch as TSwitch,
-    Slider as TSlider,
-    Upload as TUpload,
-    Cascader as TCascader,
-    TreeSelect as TTreeSelect,
-    ColorPicker as TColorPicker
-} from 'tdesign-vue-next';
-import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
-import { EbizUpload } from '../../../index.js'
-
-const props = defineProps({
-    /**
-     * 组件类型
-     * @options input|number|textarea|select|date|time|radio|checkbox|switch|slider|upload|cascader|tree-select|color-picker
-     */
-    type: {
-        type: String,
-        default: undefined,
-        validator: (val) => [
-            'input', 'number', 'textarea', 'select', 'date', 'time', 'radio',
-            'checkbox', 'switch', 'slider', 'upload', 'cascader', 'tree-select',
-            'color-picker'
-        ].includes(val)
-    },
-    /**
-     * 绑定的值
-     */
-    modelValue: {
-        type: [String, Number, Boolean, Array, Object],
-        default: undefined
-    },
-    /**
-     * 表单项标签
-     */
-    label: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 表单项字段名，唯一标识
-     */
-    name: {
-        type: String,
-        default: ''
-    },
-    /**
-     * html元素原生属性for
-     */
-    forAttr: {
-        type: String,
-        default: undefined
-    },
-    /**
-     * 表单项帮助文本
-     */
-    help: {
-        type: [String, Function],
-        default: ''
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 是否只读
-     */
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 表单项规则
-     */
-    rules: {
-        type: [Array, Object],
-        default: undefined
-    },
-    /**
-     * 自定义样式
-     */
-    customStyle: {
-        type: [String, Object],
-        default: ''
-    },
-    /**
-     * 自定义类名
-     */
-    className: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 表单项标签宽度
-     */
-    labelWidth: {
-        type: [String, Number],
-        default: undefined
-    },
-    /**
-     * 表单项标签对齐方式
-     * @options left|right|top
-     */
-    labelAlign: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['left', 'right', 'top'].includes(val)
-    },
-    /**
-     * 表单项状态
-     * @options default|success|warning|error
-     */
-    status: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
-    },
-    /**
-     * 占位文本
-     */
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否可清空
-     */
-    clearable: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 最大长度
-     */
-    maxLength: {
-        type: Number,
-        default: undefined
-    },
-    /**
-     * 最大字符数
-     */
-    maxCharacter: {
-        type: Number,
-        default: undefined
-    },
-    /**
-     * 是否显示字数限制
-     */
-    showLimitNumber: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 选项数据，用于select, radio, checkbox等
-     */
-    options: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     * 树形数据，用于tree-select
-     */
-    treeData: {
-        type: Array,
-        default: undefined
-    },
-    /**
-     * 是否支持过滤
-     */
-    filterable: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 是否支持多选
-     */
-    multiple: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 加载状态
-     */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 日期格式
-     */
-    dateFormat: {
-        type: String,
-        default: 'YYYY-MM-DD'
-    },
-    /**
-     * 日期选择器模式
-     * @options date|week|month|quarter|year
-     */
-    dateMode: {
-        type: String,
-        default: 'date',
-        validator: (val) => ['date', 'week', 'month', 'quarter', 'year'].includes(val)
-    },
-    /**
-     * 时间格式
-     */
-    timeFormat: {
-        type: String,
-        default: 'HH:mm:ss'
-    },
-    /**
-     * 最大值
-     */
-    max: {
-        type: Number,
-        default: undefined
-    },
-    /**
-     * 最小值
-     */
-    min: {
-        type: Number,
-        default: undefined
-    },
-    /**
-     * 步长
-     */
-    step: {
-        type: Number,
-        default: 1
-    },
-    /**
-     * 格式化函数
-     */
-    format: {
-        type: Function,
-        default: undefined
-    },
-    /**
-     * 文本域自适应高度
-     */
-    autosize: {
-        type: [Boolean, Object],
-        default: false
-    },
-    /**
-     * 滑块是否为范围选择
-     */
-    range: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 滑块刻度标记
-     */
-    marks: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 上传接受的文件类型
-     */
-    accept: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 上传接口地址
-     */
-    action: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 上传请求头
-     */
-    headers: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 上传是否携带cookie
-     */
-    withCredentials: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 上传前的钩子函数
-     */
-    beforeUpload: {
-        type: Function,
-        default: undefined
-    },
-    /**
-     * 上传响应格式化函数
-     */
-    formatResponse: {
-        type: Function,
-        default: undefined
-    },
-    /**
-     * 上传组件主题
-     * @options file|image|image-flow
-     */
-    uploadTheme: {
-        type: String,
-        default: 'file',
-        validator: (val) => ['file', 'image', 'image-flow'].includes(val)
-    },
-    /**
-     * 是否开启远程搜索
-     */
-    isRemote: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 远程搜索配置
-     */
-    remoteApiConfig: {
-        type: Object,
-        default: () => ({
-            url: '',
-            method: 'GET',
-            params: {},
-            data: {},
-            headers: {},
-            transformResponse: null
-        })
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'change',
-    'validate'
-]);
-
-// 计算属性处理v-model双向绑定
-const computedModelValue = computed({
-    get: () => props.modelValue,
-    set: (val) => {
-        emit('update:modelValue', val);
-    }
-});
-
-/**
- * 值变更事件
- * @param {*} val 新值
- */
-const handleChange = (val) => {
-    emit('change', val);
-};
-
-/**
- * 验证事件
- * @param {Object} validateResult 验证结果
- */
-const handleValidate = (validateResult) => {
-    emit('validate', validateResult);
-};
-</script>
-
-<style scoped>
-.custom-control {
-    width: 100%;
-}
+<template>
+    <t-form-item :class="['ebiz-s-form-item', className]" :for="forAttr" :help="help" :label="label" :name="name"
+        :style="customStyle" :rules="rules" :label-width="labelWidth" :label-align="labelAlign" :status="status"
+        @validate="handleValidate" style="margin-bottom: 10px;">
+        <!-- 输入框 -->
+        <template v-if="type === 'input'">
+            <t-input v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
+                :readonly="readonly" :clearable="clearable" :max-length="maxLength" :max-character="maxCharacter"
+                :show-limit-number="showLimitNumber" @change="handleChange" />
+        </template>
+
+        <!-- 数字输入框 -->
+        <template v-else-if="type === 'number'">
+            <t-input-number v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
+                :readonly="readonly" :max="max" :min="min" :step="step" :format="format" @change="handleChange" />
+        </template>
+
+        <!-- 文本域 -->
+        <template v-else-if="type === 'textarea'">
+            <t-textarea v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
+                :readonly="readonly" :autosize="autosize" :maxlength="maxLength" :max-character="maxCharacter"
+                :show-limit-number="showLimitNumber" @change="handleChange" />
+        </template>
+
+        <!-- 选择器 -->
+        <template v-else-if="type === 'select'">
+            <template v-if="isRemote">
+                <ebiz-remote-select v-model="computedModelValue" :placeholder="placeholder || '请选择'"
+                    :disabled="disabled" :clearable="clearable" :filterable="true" :multiple="multiple"
+                    :loading="loading" :apiConfig="remoteApiConfig" @change="handleChange" />
+            </template>
+            <template v-else>
+                <t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
+                    :disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                    :loading="loading" @change="handleChange" />
+            </template>
+        </template>
+
+        <!-- 日期选择器 -->
+        <template v-else-if="type === 'datetime'">
+            <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期时间'" :disabled="disabled"
+                :clearable="clearable" enable-time-picker format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
+        </template>
+
+
+        <!-- 日期选择器 -->
+        <template v-else-if="type === 'date'">
+            <t-date-picker v-model="computedModelValue" :placeholder="placeholder || '请选择日期'" :disabled="disabled"
+                :clearable="clearable" :format="dateFormat || 'YYYY-MM-DD'" :mode="dateMode || 'date'"
+                @change="handleChange" />
+        </template>
+
+        <!-- 时间选择器 -->
+        <template v-else-if="type === 'time'">
+            <t-time-picker v-model="computedModelValue" :placeholder="placeholder || '请选择时间'" :disabled="disabled"
+                :clearable="clearable" :format="timeFormat || 'HH:mm:ss'" @change="handleChange" />
+        </template>
+
+        <!-- 单选框组 -->
+        <template v-else-if="type === 'radio'">
+            <t-radio-group v-model="computedModelValue" :disabled="disabled" :options="options"
+                @change="handleChange" />
+        </template>
+
+        <!-- 复选框组 -->
+        <template v-else-if="type === 'checkbox'">
+            <t-checkbox-group v-model="computedModelValue" :disabled="disabled" :options="options" :max="max"
+                @change="handleChange" />
+        </template>
+
+        <!-- 开关 -->
+        <template v-else-if="type === 'switch'">
+            <t-switch v-model="computedModelValue" :disabled="disabled" @change="handleChange" />
+        </template>
+
+        <!-- 滑块 -->
+        <template v-else-if="type === 'slider'">
+            <t-slider v-model="computedModelValue" :disabled="disabled" :max="max" :min="min" :step="step"
+                :range="range" :marks="marks" @change="handleChange" />
+        </template>
+
+        <!-- 上传 -->
+        <template v-else-if="type === 'upload'">
+            <ebiz-upload v-model="computedModelValue" :disabled="disabled" :accept="accept" :multiple="multiple"
+                :max="max" :theme="uploadTheme || 'file'" @change="handleChange" />
+        </template>
+
+        <!-- 级联选择器 -->
+        <template v-else-if="type === 'cascader'">
+            <t-cascader v-model="computedModelValue" :disabled="disabled" :options="options"
+                :placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                @change="handleChange" />
+        </template>
+
+        <!-- 树形选择器 -->
+        <template v-else-if="type === 'tree-select'">
+            <t-tree-select v-model="computedModelValue" :disabled="disabled" :data="treeData || options"
+                :placeholder="placeholder || '请选择'" :clearable="clearable" :filterable="filterable" :multiple="multiple"
+                @change="handleChange" />
+        </template>
+
+        <!-- 颜色选择器 -->
+        <template v-else-if="type === 'color-picker'">
+            <t-color-picker v-model="computedModelValue" :disabled="disabled" :clearable="clearable"
+                @change="handleChange" />
+        </template>
+
+        <!-- 默认插槽，用于自定义控件 -->
+        <template v-else>
+            <slot>
+                <div class="custom-control">
+                    <slot name="default"></slot>
+                </div>
+            </slot>
+        </template>
+    </t-form-item>
+</template>
+
+<script>
+/**
+ * @displayName PC端表单项
+ * @description PC端表单项组件，基于TDesign FormItem封装，支持多种控件类型
+ * @category 表单组件
+ * @name EbizSFormItem
+ */
+export default {
+    name: "EbizSFormItem"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import {
+    FormItem as TFormItem,
+    Input as TInput,
+    InputNumber as TInputNumber,
+    Textarea as TTextarea,
+    Select as TSelect,
+    DatePicker as TDatePicker,
+    TimePicker as TTimePicker,
+    RadioGroup as TRadioGroup,
+    CheckboxGroup as TCheckboxGroup,
+    Switch as TSwitch,
+    Slider as TSlider,
+    Upload as TUpload,
+    Cascader as TCascader,
+    TreeSelect as TTreeSelect,
+    ColorPicker as TColorPicker
+} from 'tdesign-vue-next';
+import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
+import { EbizUpload } from '../../../index.js'
+
+const props = defineProps({
+    /**
+     * 组件类型
+     * @options input|number|textarea|select|date|time|radio|checkbox|switch|slider|upload|cascader|tree-select|color-picker
+     */
+    type: {
+        type: String,
+        default: undefined,
+        validator: (val) => [
+            'input', 'number', 'textarea', 'select', 'date', 'time', 'radio',
+            'checkbox', 'switch', 'slider', 'upload', 'cascader', 'tree-select',
+            'color-picker'
+        ].includes(val)
+    },
+    /**
+     * 绑定的值
+     */
+    modelValue: {
+        type: [String, Number, Boolean, Array, Object],
+        default: undefined
+    },
+    /**
+     * 表单项标签
+     */
+    label: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 表单项字段名，唯一标识
+     */
+    name: {
+        type: String,
+        default: ''
+    },
+    /**
+     * html元素原生属性for
+     */
+    forAttr: {
+        type: String,
+        default: undefined
+    },
+    /**
+     * 表单项帮助文本
+     */
+    help: {
+        type: [String, Function],
+        default: ''
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否只读
+     */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单项规则
+     */
+    rules: {
+        type: [Array, Object],
+        default: undefined
+    },
+    /**
+     * 自定义样式
+     */
+    customStyle: {
+        type: [String, Object],
+        default: ''
+    },
+    /**
+     * 自定义类名
+     */
+    className: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 表单项标签宽度
+     */
+    labelWidth: {
+        type: [String, Number],
+        default: undefined
+    },
+    /**
+     * 表单项标签对齐方式
+     * @options left|right|top
+     */
+    labelAlign: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    /**
+     * 表单项状态
+     * @options default|success|warning|error
+     */
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否可清空
+     */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 最大长度
+     */
+    maxLength: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 最大字符数
+     */
+    maxCharacter: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 是否显示字数限制
+     */
+    showLimitNumber: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 选项数据，用于select, radio, checkbox等
+     */
+    options: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     * 树形数据，用于tree-select
+     */
+    treeData: {
+        type: Array,
+        default: undefined
+    },
+    /**
+     * 是否支持过滤
+     */
+    filterable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否支持多选
+     */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 加载状态
+     */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 日期格式
+     */
+    dateFormat: {
+        type: String,
+        default: 'YYYY-MM-DD'
+    },
+    /**
+     * 日期选择器模式
+     * @options date|week|month|quarter|year
+     */
+    dateMode: {
+        type: String,
+        default: 'date',
+        validator: (val) => ['date', 'week', 'month', 'quarter', 'year'].includes(val)
+    },
+    /**
+     * 时间格式
+     */
+    timeFormat: {
+        type: String,
+        default: 'HH:mm:ss'
+    },
+    /**
+     * 最大值
+     */
+    max: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 最小值
+     */
+    min: {
+        type: Number,
+        default: undefined
+    },
+    /**
+     * 步长
+     */
+    step: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 格式化函数
+     */
+    format: {
+        type: Function,
+        default: undefined
+    },
+    /**
+     * 文本域自适应高度
+     */
+    autosize: {
+        type: [Boolean, Object],
+        default: false
+    },
+    /**
+     * 滑块是否为范围选择
+     */
+    range: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 滑块刻度标记
+     */
+    marks: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 上传接受的文件类型
+     */
+    accept: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 上传接口地址
+     */
+    action: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 上传请求头
+     */
+    headers: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 上传是否携带cookie
+     */
+    withCredentials: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 上传前的钩子函数
+     */
+    beforeUpload: {
+        type: Function,
+        default: undefined
+    },
+    /**
+     * 上传响应格式化函数
+     */
+    formatResponse: {
+        type: Function,
+        default: undefined
+    },
+    /**
+     * 上传组件主题
+     * @options file|image|image-flow
+     */
+    uploadTheme: {
+        type: String,
+        default: 'file',
+        validator: (val) => ['file', 'image', 'image-flow'].includes(val)
+    },
+    /**
+     * 是否开启远程搜索
+     */
+    isRemote: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 远程搜索配置
+     */
+    remoteApiConfig: {
+        type: Object,
+        default: () => ({
+            url: '',
+            method: 'GET',
+            params: {},
+            data: {},
+            headers: {},
+            transformResponse: null
+        })
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'validate'
+]);
+
+// 计算属性处理v-model双向绑定
+const computedModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+/**
+ * 值变更事件
+ * @param {*} val 新值
+ */
+const handleChange = (val) => {
+    emit('change', val);
+};
+
+/**
+ * 验证事件
+ * @param {Object} validateResult 验证结果
+ */
+const handleValidate = (validateResult) => {
+    emit('validate', validateResult);
+};
+</script>
+
+<style scoped>
+.custom-control {
+    width: 100%;
+}
 </style>