Vue front-end visual activity editor

First look at effects, for a visual activity editor.

Form.lljj. me/vue-editor….

Project address: github.com/lljj-x/vue-…

Simple activity visual editor based on JSON Schema out of the box.

background

When creating a visual store decoration system, it is necessary to solve the universality of configuration data form, refer to some existing solutions, and finally generate the corresponding form and verification rules through JSON Schema.

Reference: github.com/CntChen/cnt…

JSON Schema is mainly used in the following aspects:

• Based on theJSON SchemaTo dynamically generate data configuration forms and data validation
• Sync with the release processJSON SchemaVerify interface data in the back-end system
• One active block for eachJSON SchemaAnd a viewThe View componentsCan be

implementation

First of all, the visual editor needs to manage the plates, which support the visual editing configuration and effect display, and finally assemble each other into a page.

We will inevitably need a View component for each section, because each section looks different. The block configuration forms and data validation are implemented using JSON Schema, and then a drag container is used to host the blocks and other data configurations.

The diagram below:

So when we add new sections, we just need to develop a View component and write a JSON Schema to define the data.

Function is introduced

Vue based, relying on ElementUi, VueDraggable, @llJJ/VUE-jSON-schema-form

• Plates support configuration
• Support can add number, delete or not, top, bottom, icon configuration
• You can drag or click to move up or down, copy or delete the page layout
• Support page preview mode
• Support edit restore data and default plate data configuration
• View components support asynchronous loading
• Nested components are not supported
• .

To add a new plate, you only need to import the new plate in config/tools.js and configure the toolbar. For example:

import componentPackFlashSaleGoodsList from '.. /viewComponents/FlashSaleGoodsList';

const tools = [
    {
        groupName: 'Graphic'.componentList: [{
            // Add the new module
            title: 'Kill goods in seconds'.// Plate titles
            maxNum: 3.// Maximum number of times can be added
            icon: 'el-icon-picture'.// Toolbar icon class name
            componentPack: componentPackFlashSaleGoodsList, // Focus on the component package of the current section
            additional: {
                bottomDisplay: true.// Whether to display at the bottom
                topDisplay: true.// Whether to display the top
                unRemove: true // Whether it cannot be removed}}}]]Copy the code

New plate file structure is as follows: (viewComponents FlashSaleGoodsList/index, js here corresponds to the component toolbar configuration import above package files)

import propsSchema from './schema.json';
import uiSchema from './uiSchema.js';
import errorSchema from './errorSchema.js';

// This can be done asynchronously
const View = () = > import('./View.vue');

const NAME = propsSchema.id;
const componentViewName = `${NAME}View`;

export default {
    propsSchema, JSON Schema Defines the data structure and generates the form vue-json-schema-form parameters
    componentViewName,  // (Optional) The component name can be generated automatically if it is not configured
    View, // View View component
    uiSchema, // uiSchema auxiliary enhancement form style does not require vuE-jSON-schema-form parameter
    errorSchema, Vue -json-schema-form parameter is not required
    // customRule, // Custom validation rule vue-json-schema-form parameter (more vue-json-schema-form parameter can be added)
};
Copy the code

The export module is explained as follows:

• propsSchema:requiredThe JSON Schema configuration, used to generate forms, must contain a uniqueidProperties;
• View:required() => import(‘./xxx.vue’);
• componentViewName:optionalPlate View component name, not configured will automatically generate a unique ID, generally do not need to configure;
• uiSchema:optionalTo enhance the style of the generated form, it can also be configured directly in thepropsSchema;
• errorSchema:optionalTo enhance the validation prompts for forms, you can also configure them directly in thepropsSchema;
• customRule:optionalFor custom validation form data, can also be configured directly inpropsSchema;

If you need more vue – json schema – form parameter can be directly on the packages/demo/SRC/vue – editor/views/editor/editor. The vue rendering VueElementForm components can be added.

• The new plate can be seen/packages/demo/src/vue-editor/views/editor/viewComponentsInner existing plate
• Toolbars and default data are configured in/packages/demo/src/vue-editor/views/editor/configfolder

The whole implementation is relatively simple, interested can spend two hours to look at the source code, welcome to discuss questions.