diff --git a/README.md b/README.md index 8a3d575..21056de 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ +## 简介 + ## 快速开始 -1. 安装依赖 +1. 安装 ```bash npm i sczts-form-generator ``` @@ -11,12 +13,7 @@ import formGenerator, { fgWidgets } from 'sczts-form-generator' // ... Vue.use(formGenerator, { - widgets: [ - ...widgets, // 组件配置 - // 可以注入扩展组件配置 - ], - // [可选] 注入扩展组件 - extend: require.context('./components/form_generator_extends/widgets', true, /\.(vue|js)$/), + widgets: fgWidgets }); ``` @@ -97,3 +94,179 @@ changeDelay | 监听可编辑条件项表单值的防抖延时 | Number ## 如何扩展自定义表单控件? +* `/src/components/form_generator_extends` 为扩展控件目录 +* `/src/components/form_generator_extends/widgets.js` 为 widgets 配置文件 +* `/src/components/form_generator_extends/widgets` 为控件目录 +* `/src/components/form_generator_extends/widgets/[widget_name]/input.vue` 为控件实现代码 +* `/src/components/form_generator_extends/widgets/[widget_name]/attrbute.vue` 为控件自定义属性配置 + +1. 编写 widgets 配置文件 `/src/components/form_generator_extends/widgets.js` +```javascript +export default [{ + name: "扩展组件", + widgets: [ + { + type: "upload", + name: "附件", + attributes: { + title: "附件", // 默认属性 展示标题 + description: "", // 默认属性 说明文字 + placeholder: "", // 默认属性 占位符 + required: false, // 默认属性 是否必填 + multiple: true, // 默认属性 是否可多选 + accept: [], // 自定义属性 上传格式 + // ... + }, + ui: { + width: 24 + } + } + ] +}] +``` +2. 编写自定义上传控件 `/src/components/form_generator_extends/widgets/upload/input.vue` +```vue + + + +``` + +3. 上传控件属性配置[可选] `/src/components/form_generator_extends/widgets/upload/attribure.vue` +```vue + + + +``` + +4. 在 `main.js` 中全局引用时注入自定义配置 +```javascript +import Vue from 'vue' +import formGenerator, { fgWidgets } from 'sczts-form-generator' +import fgExtends from "@/components/form_generator_extends/widgets.js" +// ... +Vue.use(formGenerator, { + widgets: { + ...fgWidgets, + ...fgExtends + }, + // 注入扩展组件目录 + extend: require.context('@/components/form_generator_extends/widgets', true, /\.(vue|js)$/), +}); + +``` \ No newline at end of file