怎么实现商城装修自定义添加模板功能

Question

这里是一个商城装修的功能，可以自己添加不同功能类型的组件，组件可以根据点击加号位置出现在不同位置，并且点击保存后刷新还在。。像自然流一样，删除组件后下方的组件位置会往上挪，新增组件后，下方的会被挤下去。我用的是vue。
1.点击组件，组件会出现上面下面两个加号按钮，这个按钮的作用是决定新组件出现在旧组件的上方或者下方的位置的。
2.点击加号按钮，右边出现组件栏，栏里的按钮表示要添加的组件的类型。
3.点击组件栏中的组件按钮，比如轮播图，页面上会出现轮播图组件，如果之前点的是旧组件上面加号按钮，新组件就会出现在旧组件上方，相反点下方加号按钮，新组件就会出现在旧组件下方。
现在我有两条思路。
1,页面上写出组件模板的框架，用v-for遍历出组件，添加组件就是添加数据，但是这样的话同类型的组件会出现在同一块区域，如果是点不同类型的组件上的加号按钮，在出现的时候给他定位在不同类型组件的上方或者下方，那我不知道怎么像自然流一样，在删除或者新增组件时，实现下方组件位置的挪动。
2,写好组件的模板，用插入标签的形式创建组件，模板就是标签的内容。同类型的组件数据放在一个数组里，新增组件的时候，新增标签也添加一条数据。但是添加标签这种形式刷新就没了，我也不知道怎么保存。

Answer 1

可以联系我们，商城本身有的功能