Vue operates DOM to solve display position problem

A recent need, briefly record the process of thinking and solving

1. Requirements

The Upload Card button can be displayed at the first position of the uploaded file list or at the end.

The simplified code is as follows:

// custom-upload component<div class="wrapper" >
  <el-upload />
  <FilePreview  
    v-for="item in fileList"
    :key=""
    :src="" />
</div>

The upload card button and the upload file list are in a div element. The upload card button is the first child element of the div.

Requires the extension component function, the upload card button can be the last element of the div

2. Solutions and ideas

1. Add prop parameters to control the display position of uploading cards, which is in the first position by default.

<script lang="ts" setup>
interface IProps {
  position?: 'first' | 'last'
}

const props = withDefaults(defineProps<IProps>(), {
  position: 'first',
})
</script>

2. Control the position of the upload card button

(1) The first idea is to copy it directly behind a copy in <FilePreview/>.

The first or last one is displayed through parameter control.

Although this method is convenient and fast, it has two disadvantages.

<div class="wrapper">
  <el-upload v-if=" === 'first'" />
  <FilePreview  
    v-for="item in fileList"
    :key=""
    :src="" />
  <el-upload v-if=" === 'last'" />
</div>

• Repeat code, not elegant enough
• <el-upload /> has many attributes, and it is maintained later. After changing the first component, it is easy to miss the last component and cause bugs.

(2) In order to solve the problem of code duplication, it is a good idea to encapsulate the <el-upload /> component into a component.

However, because there are too many attributes on <el-upload />, you have to write a lot of props.

(3) After further thinking, within this component, the DOM can be operated to achieve the purpose of movement. Both of the above problems can be solved

onMounted(() => {
  if ( === 'last') { 
    const container: any = ('wrapper')
    const firstItem: any = 
    (firstItem)
  }
})

The code for operating the DOM in vue must be written in onMounted. At this time, the component mount is completed and the DOM can ensure it is obtained.

There are three steps to operate the DOM:

• Get the div parent element: by getting the div element
• Get the upload button card: Get the upload card button through the firstChild attribute
• Move: Move to the end of the div via appendChild method

The DOM operation steps are determined. The methods that meet the above three steps can also be transformed, such as:

onMounted(() => {
  if ( === 'last') { 
    const container: any = ("#wrapper")
    const firstItem: any = [0]
    (firstItem, null)
  }
})

• Get the div parent element: by getting the div element
• Get the upload button card: get the upload card button through the childNodes attribute
• Move: Insert the first element to the end by insertBefore method

3. DOM method organization

appendChild(): Used to add a node to the end of the element

insertBefore(): Put a node at a specific location in the element

replaceChild(): replace a node in a child element

cloneNode(): Copy a node

const container: any = ('wrapper')
(newNode)
(newNode, targetNode)
(newNode, targetNode)
() 

This is the article about Vue operating DOM to solve display position problems. For more related content on Vue DOM display position, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!