Technology stack: use vue3's composition api and tsx for development
1. Requirements description
Click Edit to display the shuttle box:
The left dimension can be dragged to the right, and the selected dimension can be dragged up and down to adjust the order.
2. Demand Analysis
1. State transfer process
Let's first analyze the state transfer process in the entire process.
In the shuttle box: Drag the optional dimension to the selected dimension => click OK, the selected dimension is passed to the text display selected dimension part (realized by emit) => click Query, the dimension is passed to the request body, and the query is initiated.
2. Shuttle frame analysis
This is basically a fully customized shuttle box. I took a brief look at the shuttle boxes of antdv and element-plus. The complex API is not as fast as developing it yourself.
From a global analysis, the pop-up box is implemented with a-modal, and the styles of the shuttle boxes on the left and right sides are basically the same, except that there is an additional number of currently selected items on the right side.
Dragging and sorting are implemented through vue-draggable-next.
The structure of the list on the left is defined as follows:
export interface DimStructure {
/** 维度分组名 */
name: string
/** 下属维度 */
children: {
value: string
label: string
}[]
}The selected dimension structure on the right is defined as follows:
export interface EnumLabel {
value: string
label: string
}[]During the development process, the most time-consuming part here is the understanding of vue-draggable api.
Therefore, in the following pages, I will focus on explaining this part, and deepening the proficiency of API is the self-cultivation of front-end people (escape
3. Realization of needs
vue-draggable implements drag and drop
What is more in line with our interaction is the two-lists in the demo sample
demo link: vuedraggable
Drag and drop here, you need to configure group parameters in the same group, and you can customize the behavior of pull and put.
On the left side, it cannot be dragged in, but it can be dragged out if the selection is not full. Therefore a judgment is required. The configuration is as follows:
group={
{
name: 'dims',
pull: (to, from) => {
return drag.value ? selectedDims.value.length === maxChoseList.value ? false :
'clone') : 'clone'
},
sort: false,
put: false,
}}Note that it is configured in pull, not in onMoveEnd.
The drag and drop sort on the right is, and the configuration used to generate animation is animation .
Another thing to note here is the potential problem of references in vue-draggable-next:
Change the citation to:
import draggable from 'vuedraggable/src/vuedraggable'
In this way, the packaging can be successful.