foreword
Among many development technologies, Vue component development technology has attracted much attention for its excellent flexibility and efficiency.
The low-code platform believes that many people know its existence, and now most companies are developing their own low-code platforms. First, let’s take a look at the visual interface of the low-code platform:
Official website: https://www.jnpfsoft.com/?csdn, if you are interested, try it yourself.
It can be seen that most page designers include several areas: the left is the component, the middle is the canvas, and the right is the attribute configuration area. Next, we analyze how it realizes dragging to form a form page. Here we do not study the CSS layout, but directly analyze how it is realized.
1. Analysis
First of all, let’s think about it, we drag a desired component from the component list on the left to the middle canvas, and then form our expected page, and when we click on a component on the canvas, there will be a property configuration area of the current component ( Each component has a unique attribute area), and modify the attribute value on the right, and the page will change accordingly. How exactly was this accomplished?
In fact, this can be achieved through json. We pre-define the json describing the component. The json contains the current component data and the style attribute data of the current component, etc., and the component generator will combine the json describing the component to render the actual component. , when the style attribute is modified, the component style is updated synchronously; let's take the input component as an example, and its roughly json is as follows:
json:{
fieldId: '',
name: 'Input',
label: '单行文本',
icon:"input01"
placeholder: '请输入',
value: '',
rules: {},
makeStyle: { //制作表单的时候，页面的样式控制
active: false
},
style: {}, // 组件的样式
setting: {}, // 组件的其他属性设置，比如：rows: 2
}Knowing that components need to be described in json, I will start formal development next;
2. Component list
The component list on the left is relatively simple, that is, put the json of all components into an array and traverse it on the page.
//components 组件列表
<div
v-for="(item, index) in components"
:key="index"
>
<i class="iconfont" :class="item.icon"></i>//图标
<span>{
{ item.label }}</span>//列表显示的名字
</div>3. Develop drag-and-drop build panels
Drag and drop components Here we use the vuedraggable plug-in. For related APIs, please check the official website documents for yourself, and I won’t elaborate here.
component area
<!--组件列表改进，外层包裹draggable标签 -->
<draggable
v-model="components" // 拖拽列表数据源
:options="{
group:{
name: 'itxst', // 可拖拽列组，相同表名可相互推拽
pull: 'clone' // 拖拽模板物料，复制到目标列表
},
sort: false // 是否可推拽排序
}"
:clone="handleClone" // 复制模板物料执行方法 ，比如克隆元素并产生全局唯一的fieldId
animation="300" // 动画延迟
>
<div
v-for="(item, index) in components"
:key="index"
>
<i class="iconfont" :class="item.icon"></i>
<span>{
{ item.label }}</span>
</div>
</draggable>
//克隆的方法
handleClone(obj) {
const newObj = Object.assign(_.cloneDeep(obj), {
fieldId: `${obj.name}_${new Date().getTime()}`,
})
return newObj
}page
<!-- 画布区域 -->
<draggable
v-model="list2" // 拖拽列表数据源
group="itxst" // 可拖拽列组，相同表名可相互推拽
ghostClass="ghost" // 拖动元素的占位样式class
chosenClass="chosen" // 选中目标的样式class
selector="selector"
:animation="500" // 动画延迟
:sort="true" // 是否可推拽排序
>
<component
v-for="item in mList"
:key="item.id"
:is="item.name"
v-bind="item"
></component>
</draggable>list2 is an array of component json in our canvas, where the <component> tag is used to render the corresponding component, and the next step is the property configuration area;
4. Property configuration area
The attribute configuration area actually displays different configuration components according to different components, and it is actually a component. When we click a component in the canvas area, the configuration area will display its properties and values. When we modify the values, the page will also change accordingly.
5. Component deletion and copying
In fact, the deletion of the component is very simple. Remember the unique fieldId formed by the previous dragging. Click Delete to get the fieldId in the component array and delete the corresponding component json in the array. Similarly, when copying, a piece of data is inserted behind the component corresponding to the current fieldId. It is worth noting that copying also generates a unique fieldId;
6. Postscript
So far, drag and drop has been basically implemented. Think about it carefully. In fact, the low-code platform is always the same, and it is all based on json. Later, how to implement nested components and the communication method between components will be discussed. The code will It will be open source, and I will make a simple demo so that everyone can compare the ideas in the article and think about it by themselves;
Take you from scratch to realize the Vue low-code platform - Zhihu (zhihu.com)