@vjsf-arco-design/theme

基于Arco Design Vue/Vue3/JSON Schema生成表单

安装

## npm
npm install --save @vjsf-arco-design/theme

## yarn
yarn add @vjsf-arco-design/theme

## pnpm
pnpm add @vjsf-arco-design/theme

使用

<script lang="ts">
  import {ref} from "vue";
  import VueForm from '@vjsf-arco-design/theme';


  export default {
    name: 'Demo',
    setup() {
      const formData = ref({});
      const schema = {
        type: 'object',
        required: [
          'userName',
          'age',
        ],
        properties: {
          userName: {
            type: 'string',
            title: '用户名',
            default: 'Liu.Jun',
          },
          age: {
            type: 'number',
            title: '年龄'
          },
          bio: {
            type: 'string',
            title: '签名',
            minLength: 10,
            default: '知道的越多、就知道的越少',
            'ui:options': {
              placeholder: '请输入你的签名',
              type: 'textarea',
              rows: 1
            }
          }
        }
      }

      return {
        formData,
        schema
      }
    }
  }

</script>

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

配置

• form-props

1. 固定参数部分 (这部分参数和当前使用的ui库无关)

// 默认值
formProps = {
    layoutColumn: 1, // 1 2 3 ，支持 1 2 3 列布局，如果使用inline表单这里配置无效
    inline: false, // 行内表单模式，建议：开启时labelPosition不要配置top, antd不要配置labelCol wrapperCol
    inlineFooter: false, // 如果想要保存按钮和表单元素一行显示，需要配置 true
    labelSuffix: '：', // label后缀
    labelPosition: 'top', // 表单域标签的位置
    isMiniDes: false, // 是否优先mini形式显示描述信息（label文字和描述信息同行显示）
    defaultSelectFirstOption: true, // 单选框必填，是否默认选中第一个
    popover: {}, // 透传给ui 组件库的popver组件，比如element ui Popover，antd a-popover
}

2. 当前ui库form组件的参数

formProps = {
  // 省略固定参数
  labelWidth: 'auto', // 表单域标签的宽度，例如 '50px'
}

事件

submit

点击提交按钮, 且表单通过了校验

注意: 只有通过form-footer配置的才能触发该事件

validation-failed

点击提交, 且表单不通过, 所捕获的错误信息

注意: 只有通过form-footer配置的才能触发该事件

cancel

点击取消

注意: 只有通过form-footer配置的才能触发该事件

change

• 参数(newVal, oldVal) 表单的值发生改变

引用类型，只有重新对对象赋值，否则newVal 等于 oldVal 参见 vue watch

form-mounted

• 参数(formRef, { formData }) 通过该方法可以获取到当前form组件实例