Vue操作DOM解决显示位置问题

// custom-upload 组件
<div class="wrapper" id="wrapper">
  <el-upload />
  <FilePreview  
    v-for="item in fileList"
    :key="item.id"
    :src="item.url" />
</div>

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

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

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

onMounted(() => {
  if (props.position === 'last') { 
    const container: any = document.getElementById('wrapper')
    const firstItem: any = container.firstChild
    container.appendChild(firstItem)
  }
})

onMounted(() => {
  if (props.position === 'last') { 
    const container: any = document.querySelector("#wrapper")
    const firstItem: any = container.childNodes[0]
    container.insertBefore(firstItem, null)
  }
})

const container: any = document.getElementById('wrapper')
container.appendChild(newNode)
container.insertBefore(newNode, targetNode)
container.replaceChild(newNode, targetNode)
container.cloneNode()