Pila de tecnología: utilice la api de composición de vue3 y tsx para el desarrollo
1. Descripción de requisitos
Haga clic en Editar para mostrar el cuadro de transporte:
La dimensión izquierda se puede arrastrar hacia la derecha y la dimensión seleccionada se puede arrastrar hacia arriba y hacia abajo para ajustar el orden.
2. Análisis de la demanda
1. Proceso de transferencia de estado
Primero analicemos el proceso de transferencia de estado en todo el proceso.
En el cuadro de transporte: arrastre la dimensión opcional a la dimensión seleccionada => haga clic en Aceptar, la dimensión seleccionada se pasa a la parte de dimensión seleccionada para mostrar texto (realizada por emisión) => haga clic en Consulta, la dimensión se pasa al cuerpo de la solicitud y se inicia la consulta.
2. Análisis del marco del transbordador.
Esta es básicamente una caja de transporte totalmente personalizada. Después de un breve vistazo a las cajas de transporte de antdv y element-plus, la API compleja no es tan rápida como desarrollarla usted mismo.
Desde un análisis global, el cuadro emergente se implementa con a-modal, y los estilos de los cuadros lanzadera en los lados izquierdo y derecho son básicamente los mismos, excepto que hay una cantidad adicional de elementos seleccionados actualmente en el lado derecho. .
Arrastrar y ordenar se implementan mediante vue-draggable-next.
La estructura de la lista de la izquierda se define de la siguiente manera:
export interface DimStructure {
/** 维度分组名 */
name: string
/** 下属维度 */
children: {
value: string
label: string
}[]
}La estructura de dimensiones seleccionada a la derecha se define de la siguiente manera:
export interface EnumLabel {
value: string
label: string
}[]Durante el proceso de desarrollo, la parte que lleva más tiempo aquí es comprender la API que se puede arrastrar con vue.
Por lo tanto, en las siguientes páginas, me centraré en explicar esta parte y profundizar en el dominio de API es el autocultivo de las personas de front-end (escape
3. Realización de necesidades
Vue-dragable implementa arrastrar y soltar
Lo que está más en línea con nuestra interacción son las dos listas en la muestra de demostración.
enlace de demostración: vuedraggable
Arrastre y suelte aquí, debe configurar los parámetros del grupo en el mismo grupo y puede personalizar el comportamiento de extracción y colocación.
En el lado izquierdo, no se puede arrastrar hacia adentro, pero se puede arrastrar hacia afuera si la selección no está completa. Por lo tanto se requiere un juicio. La configuración es la siguiente:
group={
{
name: 'dims',
pull: (to, from) => {
return drag.value ? selectedDims.value.length === maxChoseList.value ? false :
'clone') : 'clone'
},
sort: false,
put: false,
}}Tenga en cuenta que está configurado en pull, no en onMoveEnd.
La clasificación de arrastrar y soltar a la derecha es, y la configuración utilizada para generar animación esanimación .
Otra cosa a tener en cuenta aquí es el posible problema de las referencias en vue-draggable-next:
Cambie la cita a:
import draggable from 'vuedraggable/src/vuedraggable'
De esta manera, el embalaje puede tener éxito.