position: absolute 只处理第一项

Question

我正在创建一张用户卡，点击时卡顶部有一个菜单按钮，它应该显示一个菜单。每当我单击循环中第一项的菜单时，它都会显示正常。但是，有很多用户卡，当我点击其他卡的菜单按钮时，菜单仍然显示在第一张卡上，而不是我点击的卡上。我在这里做错了什么？

<template>
<div class="custom-users" v-if="users && users.length > 0">
      <user-card
        v-for="user in users"
        :key="user.userId"
        @open-menu="openMenu"
      >
      </user-card>
      <div class="menu" v-if="showMenu">
          <p>Delete</p>
      </div>
</div>
</template>
<script>
export default{
  data() {
    return {
       showMenu: false,
    };
  },
   methods: {
    openMenu(){
      this.showMenu = !this.showMenu;
    },
}
}
</script>
<style scoped>

.custom-users{
  position: relative;
}
.menu{
  position: absolute;
  height: 100px;
  width: 100px;
  top: 60px;
  right: 25px;
  z-index: 9999;
}
</style>

Answer 1

绝对定位的元素绝对相对定位到它们最近的父元素，上面有position: relative（或position: absolute）。

您需要将这两个元素放在具有position: relative 的容器中，以便下拉菜单相对于卡片而不是整个容器定位。

Answer 2

菜单当前相对于custom-users 定位，这是所有<user-card> 共有的。它看起来只是与第一个 <user-card> 相关联，因为它们都与左上角对齐（在正常流程中）。

移动菜单

<div class="menu" v-if="showMenu">
   <p>Delete</p>
</div>

在<user-card> 组件中，将position: relative; 应用到它的最顶层元素，并使下面的状态和方法也成为<user-card> 的一部分。

data() {
  return {
       showMenu: false,
    };
  },
methods: {
   openMenu(){
      this.showMenu = !this.showMenu;
   },
}

现在这不会是一个大问题，因为菜单只是有条件地创建的。如果 menu 本身就是一个大组件，您可以让它能够显示在将来作为 props 传入的坐标处。