0.2.6 • Published 10 months ago
naive-ui-custom-form v0.2.6
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>
0.1.10
12 months ago
0.1.11
12 months ago
0.1.12
12 months ago
0.1.13
11 months ago
0.1.14
11 months ago
0.2.1
10 months ago
0.1.2
12 months ago
0.2.0
10 months ago
0.1.8
12 months ago
0.2.6
10 months ago
0.1.7
12 months ago
0.1.9
12 months ago
0.2.3
10 months ago
0.1.4
12 months ago
0.2.2
10 months ago
0.1.3
12 months ago
0.1.6
12 months ago
0.2.4
10 months ago
0.1.5
12 months ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago