# 全局Widget组件

Widget 组件,需要支持v-model双向绑定,通常可以直接使用ui库的输入组件,如 el-input,针对一些不能直接使用的场景场景提供如下的内置Widget组件:

如下组件在运行时也会在内部直接使用。

提示

  • vjsf 在运行中会自动注册如下全局Widget组件。
  • vue3 版本使用 v-model使用 model: modelValue
  • 自定义Widget组件参见

# CheckboxesWidget

复选框组,内部使用 elementUi el-checkbox-group 组件

# props

  • value/v-model required,类型 [Array]
  • enumOptions 数组 选项列表,结构如:[{value: '1', label: '选项一'}],value 为值,label 为显示标签

传递其它额外的参数会透传给 el-checkbox-group 组件

# RadioWidget

单选框组,内部使用 elementUi el-radio-group 组件

# props

  • value/v-model required,类型 [String, Number, Boolean]
  • enumOptions 数组 选项列表,结构如:[{value: '1', label: '选项一'}],value 为值,label 为显示标签

传递其它额外的参数会透传给 el-radio-group 组件

# SelectWidget

下拉选择,内部使用 elementUi el-select 组件

# props

  • value/v-model required,任意类型
  • enumOptions 数组 选项列表,结构如:[{value: '1', label: '选项一'}],value 为值,label 为显示标签

传递其它额外的参数会透传给 el-select 组件

# UploadWidget

# props

  • value/v-model required,类型:[String, Array]
  • responseFileUrl Function ,用于处理上传文件接口返回值中提取 url 字段,接受上传接口返回值为参数
  • btnText 配置上传按钮文字
  • slots 支持传入 VNode 对象,最终传递给 upload 组件slot,用于自定义上传按钮和提示文案(使用方法参见如下DEMO)

传递其它额外的参数会透传给 el-upload 组件

responseFileUrl 默认值如下:

{
    responseFileUrl: {
        default: res => (res ? (res.url || (res.data && res.data.url)) : ''),
        type: [Function]
    }
}

如下:使用 ui:slots 重置上传按钮

<template>
    <vue-form
        v-model="formData"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            schema: {
                title: '文件上传',
                type: 'object',
                description: '文件上传 使用 el-upload组件,支持所有的 el-upload 参数,<br/>slot 可以通过 slots参数传入数组VNode list',
                properties: {
                    imgUrl: {
                        title: '单个图片',
                        type: 'string',
                        default: 'http://img.alicdn.com/tfs/TB1vYlkdnZmx1VjSZFGXXax2XXa-468-644.jpg_320x5000q100.jpg_.webp',
                        'ui:action': 'https://run.mocky.io/v3/518d7af7-204f-45ab-9628-a6e121dab8ca',
                        'ui:widget': 'UploadWidget',
                        'ui:slots': {
                            default(h) {
                                return h('el-button', {
                                    slot: 'default',
                                    props: {
                                        size: 'mini',
                                        type: 'primary'
                                    },
                                }, ['上传图片'])
                            },
                            tip(h) {
                                return h('div', {
                                    slot: 'tip',
                                    style: {
                                        fontSize: '12px',
                                        color: '#666'
                                    }
                                }, ['注:请上传100 * 100尺寸的图片'])
                            },
                       }
                    },
                    imgUrlList: {
                        title: '多图',
                        type: 'array',
                        'ui:action': 'https://run.mocky.io/v3/518d7af7-204f-45ab-9628-a6e121dab8ca',
                        'ui:btnText': '重新设置上传按钮文字',
                        'ui:widget': 'UploadWidget',
                        // eslint-disable-next-line max-len
                        default: ['http://img.alicdn.com/tfs/TB1vYlkdnZmx1VjSZFGXXax2XXa-468-644.jpg_320x5000q100.jpg_.webp'],
                        items: {
                            type: 'string',
                        }
                    }
                }
            },
            formData: {}
       }
    }
};
</script>
显示代码
复制代码 | 在线运行

# TimePickerWidget

内部使用 timPick 组件,支持参数透传

# DatePickerWidget

内部使用 DatePicker / DateTimePicker 组件,支持参数透传

# DateTimePickerWidget

内部使用 DatePicker / DateTimePicker 组件,支持参数透传

# vue3 ant、naiveUi 特有的全局组件

内部使用 DatePicker / DateTimePicker 组件,支持参数透

vue3 ant和naiveUi 由于 v-model 默认不使用 model: modelValue,所以对常用的组件做了转换,如下:

组件名 对应ant组件 对应Naive组件
InputWidget a-input n-input
TextAreaWidget a-textarea n-input
InputNumberWidget a-input-number n-input-number
AutoCompleteWidget a-auto-complete n-auto-complete
SliderWidget a-slider n-slider
SwitchWidget a-switch a-switch
RateWidget a-rate a-rate

快速转换 modelValue 可参考:转换v-model组件 modelValue 到其它

最后更新时间: 10/5/2023, 1:52:28 PM