Recent pitfalls and summaries of using element components

I. Drawer Component
1 . There is one critical attribute:append-to-body If you encounter a drawer mask that covers the entire page, use this property
2 . Components are destroyed when the drawer is closed. use:destroy-on-close
3. The width of the drawer, as a percentage of the entire screen:size="54%"
4. Hooks in front of closing drawersfunction (math.)： :before-close="handleCloseNew"
5. Nested drawers: Sometimes you will encounter a second layer of drawers that cannot be displayed properly no matter what attributes are used, they cannot be displayed at the top, and the masking layer covers the entire page. A brute force solution was used:

	  // For use when unfolding the second drawer
      setTimeout(() => {
        document.getElementsByClassName('v-modal')[0].style.width = '68%' // Set the width of the mask layer
        document.getElementsByClassName('v-modal')[0].addEventListener('click',()=>{
          this.inputVisible = false // Add a listener for the click-to-close event to the mask layer.
        })
      }, 200);

II.Uploadsubassemblies
It uses "picture-card".
6. multipe Uploading can be multi-selected
7. :limit Limit the total number of uploads
8. :file-list="arr" saves the uploaded images of thearrays(equivalent to v-modal)
9. :http-request= "uploadFile" The http request triggered by uploading an image.
10. :on-exceed="exceed" Triggered when the number of uploads exceeds the limithook function

III. Cascader Cascade Selector
11. The problem of displaying back:
在这里插入图片描述

在这里插入图片描述 The array must be a two-dimensional array, where each item is a combination of the value set in props and the value set inAll his sires.：

Finally bind to the v-modal and it will show back.

IV. Select drop-down selection component
Features needed for the product: 1 ⃣️ drop down to be able to select, 2 ⃣️ input to be able to fuzzy search, 3 ⃣️ can create new if not found by searching, 4 ⃣️ to be opened again after selecting to sort the previously selected items to the top
Use the select component of the "Create Entry" type.
123 components can be satisfied, and the 4th requirement needs to be sorted:
Encapsulates a simple bubble to satisfy a requirement

/* checkArr Array of selected items: [3,6,7,2] where the ids of the selected items are stored.
* targetArr The array to sort: [{name : 'Landscape' , id : 3},{name : 'Oil Painting' , id : 4},{name : 'Ink Painting' , id : 5}, ...]
* targetValue The field to sort the array on.
*/
changeOption : function(checkArr = [], targetArr = [], targetValue = 'value' ){
  for(let i=0;  i < checkArr.length ; i++){
    for(let j=0; j < targetArr.length ; j++){
      if(checkArr[i] == targetArr[j][`${targetValue}`]){
        [targetArr[i],targetArr[j]] = [targetArr[j],targetArr[i]] 
      }
    }
  }
  return targetArr
},