Usage

根据NaiveUi整合的自定义表单组件

editor

script:

import { CustomEdit } from 'naive-ui-custom-form'
import 'naive-ui-custom-form/dist/style.css'
const json = '{"title":"自定义表单","schema":[{"id":"d61a5da1-1bb5-4611-90b9-1dda389fa85c","label":"文本输入","field":"input","type":"input","comProps":{},"rules":[],"show":{}},{"id":"6bfb7996-c588-4973-a76a-af22fcbb5540","label":"单选","field":"radio","type":"radio","comProps":{},"rules":[],"show":{},"options":[{"label":"选项一","value":"1"},{"label":"选项二","value":"2"},{"label":"选项三","value":"3"}]},{"id":"30474810-e822-4dc4-81bf-51323ccf0b0e","label":"多选","field":"checkbox","type":"checkbox","comProps":{},"rules":[],"show":{},"options":[{"label":"选项一","value":"1"},{"label":"选项二","value":"2"},{"label":"选项三","value":"3"}]}],"basis":{"width":"50%","cols":2},"ui":{"labelPlacement":"top"},"formValue":{}}'

template:

<CustomEdit :json="json"/>

viewer

props

| 名称 | 类型 | 说明 | |------------|---------|------------------| | form-props | Object | NaiveUI中Form组件参数 | | basis | Object | custom-form的配置参数 | | formValue | Object | 表单的值 | | disabled | Boolean | 全局禁用 | | readonly | Boolean | 全局只读 | | schema | Object | 表单结构 |

form-props

详细参数参考 https://www.naiveui.com/zh-CN/light/components/form

basis

| 名称 | 类型 | 说明 | |-----------|---------|------------------| | cols | Number | 表单显示的列数 |

schema

| 名称 | 类型 | 说明 | |---------|--------|--------------------| | label | String | 表单项中文名称 | | field | String | 表单项名称 | | type | String | 表单项类型 | | props | Object | 表单项NaiveUI中的配置参数 | | event | Object | 表单项事件 | | rules | Object | 表单项表单验证规则 | | show | Object | 表单项显示规则 | | options | Array | 表单项选项（单选、多选、下拉框使用） |

schema.type

目前支持的组件有： Input, Radio, Checkbox, Select, Number, Date, Text, Switch, DynamicInput, Image, Time, Button, TreeSelect

schema.props

具体参数参考NaiveUI官方文档
https://www.naiveui.com/

schema.event

// 参考各组件文档中的event事件
event: {
  blur: (e) => {}
}

schema.rules

rules: [
  {
    // 是否必填
    required: true
  },
  {
    // 验证的正则表达式
    pattern: REGEXP_EMAIL, 
    // 错误提示
    message: '邮箱格式错误', 
    // 出发方式
    trigger: ['blur', 'change', 'input'] 
  }
]

schema.show

show: {
  // 显示条件关系 and 满足所有条件才会显示 or 有满足的条件就会显示
  relation: 'and',
  // 当目标字段的值等于预设的值，则改条件成立
  conditions: [
    {
      // 目标字段名
      field: 'type',
      // 目标字段值
      value: 'textarea'
    }
  ]
}

schema.options

options: [
  { label: '选项一', value: '1' }, 
  { label: '选项二', value: '2' }, 
  { label: '选项三', value: '3' }
]

demo

script:

import { CustomEdit } from 'naive-ui-custom-form'
import 'naive-ui-custom-form/dist/style.css'
const basis = {
}
const ui = {}
const schema = [
  {
    label: '文本输入',
    field: 'input',
    type: 'input',
    event: {
      blur: (e) => {
      },
      change: (e) => {},
      clear: () => {}
    },
    slot: {
      prefix: () => {
        return 'prefix'
      },
      suffix: () => {
        return 'suffix'
      }
    },
    rules: [],
    show: {}
  },
  {
    label: '单选',
    field: 'radio',
    type: 'radio',
    props: {},
    rules: [],
    show: {},
    options: [{ label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }]
  },
  {
    label: '多选',
    field: 'checkbox',
    type: 'checkbox',
    props: {},
    rules: [],
    show: {},
    options: [{ label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }]
  },
  {
    label: '选择器多选',
    field: 'select',
    type: 'select',
    props: {
      multiple: true
    },
    slot: {
      action: () => {
        return '123'
      }
    },
    rules: [],
    show: {},
    options: [{ label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }]
  },
  {
    label: '选择器单选',
    field: 'select2',
    type: 'select',
    props: {},
    rules: [],
    show: {},
    options: [{ label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }]
  },
  {
    label: '树型选择',
    field: 'treeSelect',
    type: 'treeSelect',
    props: {},
    slot: {
      empty: () => {
        return '123'
      }
    },
    rules: [],
    show: {}
  },
  {
    label: '数字输入',
    field: 'number',
    type: 'number',
    props: {},
    slot: {
      prefix: () => {
        return 'prefix'
      },
      suffix: () => {
        return 'suffix'
      }
    },
    rules: [],
    show: {}
  },
  {
    label: '日期选择',
    field: 'date',
    type: 'date',
    props: {},
    slot: {
      'next-month': () => {
        return '123'
      }
    },
    rules: [],
    show: {}
  },
  {
    label: '时间选择',
    field: 'time',
    type: 'time',
    props: {},
    event: {
      'update:show': (val) => {
        // console.log(val)
      },
      blur: () => {
        console.log('blur')
      }
    },
    rules: [],
    show: {}
  },
  {
    label: '开关',
    field: 'switch',
    type: 'switch',
    props: {},
    rules: [],
    show: {}
  },
  {
    label: '静态文本',
    field: 'text',
    type: 'text',
    props: {},
    rules: [],
    show: {}
  },
  {
    label: '图像',
    field: 'image',
    type: 'image',
    props: {},
    rules: [],
    show: {}
  },
  {
    label: '插槽',
    field: 'testSlot',
    type: 'slot',
    props: {},
    rules: [],
    show: {}
  },
  {
    label: '按钮',
    field: 'button',
    type: 'button',
    props: {},
    rules: [],
    event: {
      click: () => {
        console.log(123)
      }
    },
    show: {}
  }
]

const formValue = ref({})

template

<custom-view
  :schema="schema"
  v-model:form-value="formValue"
  :ui="ui"
  :basis ="basis"
  :readonly="false"
  :disabled="false"
  @update:formValue="updateFormValue"
>
  <template #testSlot>
    123
  </template>
</custom-view>