repository·master·Indexed 23 days ago
https://github.com/sscfaith/avue-form-designA drag-and-drop form builder based on Avue that allows developers to construct complex forms and export configurations as JSON. It requires element-ui (2.13.2+) and @smallwei/avue (2.6.16+). The tool provides a visual editor with customizable toolbars, local storage support, and utility methods like getData() to retrieve form configurations in JSON or string formats.
You can install the component via npm or yarn.
Prerequisites This project requires the following dependencies:
element-ui (version 2.13.2+)@smallwei/avue (version 2.6.16+)$ npm i element-ui
$ npm i @smallwei/avue
$ npm i @sscfaith/avue-form-designOr using yarn:
$ yarn add @sscfaith/avue-form-design$ npm i @sscfaith/avue-form-designTo use the form designer, first register the component in your Vue application, then use the <avue-form-design> component in your templates.
Registration
import AvueFormDesign from '@sscfaith/avue-form-design'
Vue.use(AvueFormDesign)Basic Usage
<avue-form-design
style="height: 86vh;"
:options="options"
storage
@submit="handleSubmit">
</avue-form-design>The designer uses an internal representation of the form to allow for easy editing (e.g., handling dicOption as static or remote). To use the designer with an existing Avue project, you must convert between the two formats:
transAvueOptionsToFormDesigner(obj). This converts Avue's dicUrl, dicMethod, and group structures into the designer's editable format.transformToAvueOptions(obj). This converts the designer's internal state back into a valid Avue option object that can be passed to an <avue-form> component.When using the preview feature, transformToAvueOptions is called with isPreview = true, which performs additional transformations to ensure event handlers (like change or blur) work correctly within the preview iframe.
The options prop follows the Avue configuration schema. Use these keys to control the generated form's appearance and behavior:
| Property | Description | Type | Options/Default |
|---|---|---|---|
column | Avue field definitions | Array | [] |
labelPosition | Position of the label | String | 'left', 'center', 'right' |
labelWidth | Width of the label | Number | - |
gutter | Spacing between fields | Number | 0 |
menuBtn | Show menu buttons | Boolean | true |
submitBtn | Show submit button | Boolean | true |
submitText | Text for the submit button | String | '提交' |
emptyBtn | Show clear button | Boolean | true |
emptyText | Text for the clear button | String | '清空' |
tabs | Convert multiple groups into tabs | Boolean | false |
detail | Detail mode | Boolean | false |
readonly | Global read-only mode | Boolean | false |
disabled | Global disabled mode | Boolean | false |
To use avue-form-design in your Vue project, install the package and use the Vue.use() method. This registers the Config plugin, registers the main component globally, and attaches utility methods to the Vue prototype.
Upon installation, the main component is registered globally with the name Avue followed by the component's internal name (typically AvueFormDesign).
Utility methods attached to Vue.prototype:
getAsVal: A utility for retrieving values.avueVersion: Returns the current Avue version.| Event | Description | Payload |
|---|---|---|
submit | Callback when the JSON configuration is generated | The current configuration JSON |
| Method | Parameters | Returns |
|---|---|---|
getData | type: 'string' or 'json' | Promise (returns the current editor JSON) |
When generating JSON via the UI, you can customize the output format using the configOption object:
generateType: 'json' or 'string'.space: Indentation length (1 to 4 spaces).quoteType: 'single' or 'double'.dropQuotesOnKeys: Boolean to remove quotes from object keys.dropQuotesOnNumbers: Boolean to remove quotes from numeric strings.The <avue-form-design> component accepts several props to control its layout and behavior:
| Prop | Description | Type | Default |
|---|---|---|---|
options | Field configuration | Object/String | { column: [] } |
storage | Enable local storage to prevent JSON loss on browser refresh | Boolean | false |
asideLeftWidth | Width of the left toolbar | String/Number | '270px' |
asideRightWidth | Width of the right toolbar | String/Number | '380px' |
showGithubStar | Whether to show GitHub Star | Boolean | true |
toolbar | Top toolbar configuration | Array | ['avue-doc', 'import', 'generate', 'preview', 'clear'] |
undoRedo | Enable undo/redo functionality | Boolean | true |
includeFields | Fields displayed on the left side (configured in fieldsConfig.js) | Array | - |
customFields | Custom components | Array | - |
You can customize the top toolbar using the following slots:
toolbar: Right side of the top toolbar.toolbar-left: Left side of the top toolbar.The FormDesign component is the main entry point for the visual form designer. It allows users to drag and drop fields, configure field and form properties, and export the resulting configuration as JSON or a string.
| Prop | Type | Default | Description |
|---|---|---|---|
options | Object or String | { column: [] } | The initial Avue configuration. If a string is provided, it is parsed into an object. |
storage | Boolean | false | If true, the designer will load/save state to local storage. |
asideLeftWidth | String or Number | '270px' | Width of the left field selection panel. |
asideRightWidth | String or Number | '380px' | Width of the right configuration panel. |
showGithubStar | Boolean | true | Whether to show the GitHub star button in the header. |
toolbar | Array | ['import', 'generate', 'preview', 'clear'] | List of buttons to show in the toolbar. |
undoRedo | Boolean | true | Enables/disables undo/redo functionality (supports Ctrl+Z / Ctrl+Y). |
includeFields | Array | (All field types) | A filter list of field types to display in the left panel. |
customFields | Array | undefined | Custom field definitions to be displayed in the left panel. |
defaultValues | Object | undefined | Default values for field properties. |
Use the getData method to retrieve the current form configuration from the designer. You can specify the output format.
type: 'json' (default), 'string', or 'app'.option: Configuration object for the beautifier (used when type is 'string').type is 'json': Returns a Promise resolving to the Avue options object.type is 'string': Returns a Promise resolving to a beautified string.type is 'app': Returns a Promise resolving to the Avue options object with functions parsed into strings (useful for backend storage).Vue.use(), the main component is available globally. The component name is dynamically constructed as Avue + the component's internal name. In most standard setups, you can use it in your templates as <AvueFormDesign />.