naive-ui-custom-form

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>