0.1.1 • Published 2 years ago
vuc3-element-form v0.1.1
vuc3-ant-form
一个基于 vuc3
ant-design-vue
的可视化表单设计器,3分钟即可将自己的组件加入到 vuc3-ant-form
之中。
预览
使用
安装
npm install vuc3-ant-form --save
示例
空白的设计器
<template>
<FormDesigner></FormDesigner>
</template>
<script>
// 依赖 ant-design-vue
import 'ant-design-vue/dist/antd.css';
// 依赖 vuc3
import 'vuc3/dist/vuc.css';
// 依赖 element-plus
import 'element-plus/dist/index.css';
import { FormDesigner } from 'vuc3-ant-form';
export default {
components: {
FormDesigner
}
}
</script>
加载 Vue SFC
<template>
<FormDesigner :vueContent="vueContent"></FormDesigner>
</template>
vueContent
的内容
export const vueContent = `
<template>
<el-form :label-width="100" :model="formData">
<el-card title="基础信息">
<el-row type="flex">
<el-col :span="12">
<el-form-item name="name" label="输入框">
<el-input v-model="formData.name"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
name:'formData'
},
};
},
methods: {
//保存表单
saveForm() {
alert(JSON.stringify(this.formData))
}
}
};
</script>`;
效果
将自己的组件加入到 vuc3-and-desing中
假设我们现在有一个简单的按钮组件 DemoButton.vue
,只需简单3步即可将其加入到设计器中
<template>
<button>{{text}}</button>
</template>
<script>
export default {
props: ['text'],
}
</script>
- 给组件注册配置
Configurator.setVucConfig({
id: 'demo-button',
props: {
text: {
label: '按钮标签',
editors: 'string',
},
},
});
- 加入到组件资源管理器中
const formExplorerComponents = [
{
title: '自定义组件',
children: [
{
title: '测试按钮',
node: '<demo-button text="按钮"></demo-button>'
}
]
}
]
- 将
DemoButton
组件注册到Vue app
之中
import DemoButton from './DemoButton.vue';
Configurator.setVucProxyHooks('onCreatedApp', (app) => {
return app.component('DemoButton', DemoButton);
});
将组件注入到组件资源管理器中
<FormDesigner :formExplorerComponents="formExplorerComponents"></FormDesigner>
大功告成,你现在可以在 vuc3-ant-from 中使用 DemoButton 组件了。效果:
文档
FormDesigner
表单设计器。
props
vueContent
string
编辑器内容formExplorerComponents
Array<title:string,children:Array<title:string,tag:string,node:string>>
表单组件资源管理器editorOptions
object
编辑器选项
Configurator
同 vuc3.Configurator
更多功能
请查看 vuc3
文档。