How to realize the function of customizing and adding template for Mall Decoration

here is a mall decoration function, you can add different functional types of components, components can appear in different locations according to the location of the plus sign, and click to save and refresh. No, no, no. Like the natural flow, the position of the lower component will move up after the component is deleted, and the lower one will be squeezed down when the component is added. I use vue.
1. Click on the component, and the component will appear with two plus buttons above and below. The function of this button is to determine where the new component appears above or below the old component.
2. Click the plus button, and the component bar appears on the right, and the button in the column indicates the type of component to be added.
3. Click the component button in the component bar, such as the broadcast chart, and the broadcast diagram component will appear on the page. If you clicked the plus button above the old component, the new component will appear above the old component. On the contrary, the new component will appear below the old component.
now I have two ideas.
1, write out the framework of the component template on the page, traverse the component with v-for, and add data. But in this way, components of the same type will appear in the same area. If you click the plus button on different types of components and position them above or below different types of components when they appear, then I don"t know how, like natural flow, when deleting or adding components, Realize the movement of the position of the components below.
2, write the template of the component and create the component by inserting the tag. The template is the content of the tag. The same type of component data is placed in an array, and when you add a new component, the new tag also adds a piece of data. But add tags in this form of refresh is gone, I do not know how to save.

Jan.21,2022

you can contact us. The mall itself has some functions

.
Menu