极客观点
项目管理
HarmonyOS
Vue自定义的组件，彼此显示的时候相互外观相互覆盖住了，这是怎么回事？
.vue组件代码
<html>代码
<div class="all">
<div class="btn" @click="show = !show"></div>
<div class="c" v-if="show"></div>
</div>
<script>代码
module.exports = {
data: function() {
return {
show: false,
}
},
}
css样式
.all{
position: relative;
}
.btn{
height: 30px;
width: 60px;
background-color: red;
border-radius: 0px;
margin: 0px;
position: relative;
}
.c{
height: 200px;
width: 100px;
background-color: blue;
position: absolute;
top: 30px;
left: 0;
}
引用如下
js中使用httpVueLoader加载的.vue
Vue.component('cd',httpVueLoader('/components/cd.vue'))
html部分只有两个<cd>
<cd></cd>
<cd></cd>
结果
可以看到第一个红色区域点击的时候，会显示出他内容里面的蓝色区域，但是，显示的时候有一部分会被下面的红色区域覆盖
重叠原因：你的 cd 组件中蓝色块是相对于 all 元素绝对定位，脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间，all 元素的大小只是由 btn 元素撑开。所以当第一个 cd 组件的蓝色块显示之后，就和第二个 cd 组件重叠了。
两个 cd 组件的层级和定位设置一模一样，文档流后面的 DOM 节点会覆盖前面的 DOM 节点，所以第二个组件覆盖了第一个组件。