Vue操作DOM解决显示位置问题
作者：RePeaT
这篇文章主要介绍了Vue操作DOM解决显示位置问题,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
近来遇到的一个需求，简单记录一下思考和解决的过程
一、需求
上传卡片按钮，可显示在上传文件列表的首位，也可显示在末尾。
简化代码如下：
// custom-upload 组件
<div class="wrapper" id="wrapper">
<el-upload />
<FilePreview
v-for="item in fileList"
:key="item.id"
:src="item.url" />
</div>
上传卡片按钮和上传文件列表在一个div元素内，上传卡片按钮是div的第一个子元素，
需要扩展组件功能，上传卡片按钮可为div的最后一个元素
二、解决办法及思路
一、增加prop参数，用来控制上传卡片的显示位置，默认在首位
<script lang="ts" setup>
interface IProps {
position?: 'first' | 'last'
}
const props = withDefaults(defineProps<IProps>(), {
position: 'first',
})
</script>
二、控制上传卡片按钮的位置
（1）第一想法是，直接复制在一份在<FilePreview/ >后面，
通过参数控制显示第一个还是最后一个，
此方法虽然方便快捷，但也有两点缺点。
<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>
- 代码重复，不够优雅
- <el-upload />上属性多，后期维护，改了第一个组件，容易漏掉最后一个组件，造成bug
（2）为了解决代码重复的问题，在想到将<el-upload />组件封装成组件，不失为一个好办法，
但是由于<el-upload />上属性太多，要写很多prop。
（3）在进一步思考，在本组件内，可操作DOM，达到移动的目的。上面两个问题都可以解决
onMounted(() => {
if (props.position === 'last') {
const container: any = document.getElementById('wrapper')
const firstItem: any = container.firstChild
container.appendChild(firstItem)
}
})
在vue中操作DOM的代码要写在onMounted中，此时组件挂载完成，DOM可确保获取到。
操作DOM需要三步：
- 获取div父元素：通过document.getElementById获取div元素
- 获取上传按钮卡片：通过firstChild属性，获取上传卡片按钮
- 移动：在通过appendChild方法移动到div的末尾
DOM操作步骤确定，满足上面三步的方法，还可以变换，比如：
onMounted(() => {
if (props.position === 'last') {
const container: any = document.querySelector("#wrapper")
const firstItem: any = container.childNodes[0]
container.insertBefore(firstItem, null)
}
})
- 获取div父元素：通过document.querySelector获取div元素
- 获取上传按钮卡片：通过childNodes属性的，获取上传卡片按钮
- 移动：在通过insertBefore方法，将第一个元素插入到最后
三、DOM方法整理
appendChild()：用于向元素的末尾添加一个节点
insertBefore()：把节点放在元素中某个特定的位置上
replaceChild()：替换子元素中某个节点
cloneNode()：复制一个节点
const container: any = document.getElementById('wrapper')
container.appendChild(newNode)
container.insertBefore(newNode, targetNode)
container.replaceChild(newNode, targetNode)
container.cloneNode()
到此这篇关于Vue操作DOM解决显示位置问题的文章就介绍到这了,更多相关Vue DOM显示位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！