0.0.7 • Published 5 months ago
@vjsf-arco-design/theme v0.0.7
@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
- 固定参数部分 (这部分参数和当前使用的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
}
- 当前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组件实例