prefacio
Entre muchas tecnologías de desarrollo, la tecnología de desarrollo de componentes Vue ha atraído mucha atención por su excelente flexibilidad y eficiencia.
La plataforma de código bajo cree que muchas personas conocen su existencia, y ahora la mayoría de las empresas están desarrollando sus propias plataformas de código bajo. Primero, echemos un vistazo a la interfaz visual de la plataforma de código bajo:
Sitio web oficial: https://www.jnpfsoft.com/?csdn, si está interesado, pruébelo usted mismo.
Se puede ver que la mayoría de los diseñadores de páginas incluyen varias áreas: la izquierda es el componente, el medio es el lienzo y la derecha es el área de configuración de atributos. A continuación, analizamos cómo se realiza el arrastre para formar una página de formulario. Aquí no estudiamos el diseño CSS, sino que analizamos directamente cómo se realiza.
1. Análisis
En primer lugar, pensemos en ello, arrastramos un componente deseado de la lista de componentes a la izquierda al lienzo central, y luego formamos nuestra página esperada, y cuando hacemos clic en un componente en el lienzo, habrá una configuración de propiedad área del componente actual (cada componente tiene un área de atributo única) y modifique el valor del atributo a la derecha, y la página cambiará en consecuencia. ¿Cómo se logró esto exactamente?
De hecho, esto se puede lograr a través de json. Predefinimos el json que describe el componente. El json contiene los datos del componente actual y los datos de atributos de estilo del componente actual, etc., y el generador de componentes combinará el json que describe el componente para representar el componente real. , cuando se modifica el atributo de estilo, el estilo del componente se actualiza sincrónicamente; tomemos el componente de entrada como ejemplo, y su json más o menos es el siguiente:
json:{
fieldId: '',
name: 'Input',
label: '单行文本',
icon:"input01"
placeholder: '请输入',
value: '',
rules: {},
makeStyle: { //制作表单的时候，页面的样式控制
active: false
},
style: {}, // 组件的样式
setting: {}, // 组件的其他属性设置，比如：rows: 2
}Sabiendo que los componentes deben describirse en json, comenzaré el desarrollo formal a continuación;
2. Lista de componentes
La lista de componentes de la izquierda es relativamente simple, es decir, coloque el json de todos los componentes en una matriz y recorra la página.
//components 组件列表
<div
v-for="(item, index) in components"
:key="index"
>
<i class="iconfont" :class="item.icon"></i>//图标
<span>{
{ item.label }}</span>//列表显示的名字
</div>3. Desarrolle paneles de construcción de arrastrar y soltar
Componentes de arrastrar y soltar Aquí usamos el complemento vuedraggable Para las API relacionadas, consulte los documentos del sitio web oficial por sí mismo, y no daré más detalles aquí.
área de componente
<!--组件列表改进，外层包裹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
}página
<!-- 画布区域 -->
<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 es una matriz de componentes json en nuestro lienzo, donde la etiqueta <component> se usa para representar el componente correspondiente, y el siguiente paso es el área de configuración de atributos;
4. Área de configuración de propiedades
El área de configuración de atributos en realidad muestra diferentes componentes de configuración según diferentes componentes, y en realidad es un componente. Cuando hacemos clic en un componente en el área del lienzo, el área de configuración mostrará sus propiedades y valores. Cuando modificamos los valores, la página también cambiará en consecuencia.
5. Eliminación y copia de componentes
De hecho, la eliminación del componente es muy simple. Recuerde el ID de campo único formado por el arrastre anterior. Haga clic en Eliminar para obtener el ID de campo en la matriz del componente y eliminar el json del componente correspondiente en la matriz. De manera similar, al copiar, se inserta un dato detrás del componente correspondiente al ID de campo actual. Vale la pena señalar que la copia también genera un ID de campo único;
6. Posdata
Hasta ahora, básicamente se ha implementado arrastrar y soltar. Piénsalo bien. De hecho, la plataforma de código bajo es siempre la misma y todo está basado en json. Más adelante, cómo implementar componentes anidados y el método de comunicación entre componentes. será discutido El código será de código abierto, y haré una demostración simple para que todos puedan comparar las ideas en el artículo y pensar en ello por sí mismos;
Lo llevará desde cero para realizar la plataforma de código bajo Vue - Zhihu (zhihu.com)