Javascript 相对于列表大小的模态位置

我在v-for（或ng repeat，如您所愿）中有一个待办事项列表，在每个待办事项列表中我都希望有一个delete模式。我用js和css手工制作这个模型。问题是，我希望模态的位置是相对于列表的。 例如，如果我在列表的第一个元素，我希望模态显示在顶部（在第一个元素前面）。 但是如果是列表的第10个元素，我希望模态显示在第10个元素前面，而不是第一个元素前面的顶部

就像这把小提琴：

有人知道我该怎么做吗

html:

<div id="vue-instance">
  <ul>
    <li v-for="(index, item) in inventory">
      {{ item.name }} - ${{ item.price }}
      <button @click="deleteLeader(index, item)"> delete</button>
    </li>
  </ul>
</div>

---

您可以将

$event

作为参数传递给

deleteLeader

函数，从那里您可以获取被引用的html元素，并获取其位置并将其分配给模式

像这样的

var vm=new Vue({
el:“#vue实例”，
数据：{
库存：[
{名称：'MacBook Air'，价格：1000}，
{名称：'MacBookPro'，价格：1800}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Acer Aspire One'，价格：300}
]
},
方法：{
deleteLeader:函数（索引、项、事件）{
var m=document.getElementById（“模态”）；
m、 style.display=“block”；
m、 style.top=event.target.offsetTop+“px”；
m、 style.left=event.target.offsetLeft+“px”；
//这是库存拼接（索引1）；
}
}
});
#模态{
位置：绝对位置；
排名：0；
左：0；
背景色：红色；
填充：20px；
盒影：0.4px 5px 0 rgba（0,0,0,0.14），0.1px 10px 0 rgba（0,0,0,0.12），0.2px 4px-1px rgba（0,0,0,0.3）；
}



{{item.name}-${{item.price}
删除


你确定吗？
对
大概
您可以将
$event
作为参数传递给您的
deleteLeader
函数，从那里您可以获取被引用的html元素，并获取其位置并将其分配给一个模式

像这样的


var vm=new Vue({
el:“#vue实例”，
数据：{
库存：[
{名称：'MacBook Air'，价格：1000}，
{名称：'MacBookPro'，价格：1800}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Lenovo W530'，价格：1400}，
{名称：'Acer Aspire One'，价格：300}
]
},
方法：{
deleteLeader:函数（索引、项、事件）{
var m=document.getElementById（“模态”）；
m、 style.display=“block”；
m、 style.top=event.target.offsetTop+“px”；
m、 style.left=event.target.offsetLeft+“px”；
//这是库存拼接（索引1）；
}
}
});
#模态{
位置：绝对位置；
排名：0；
左：0；
背景色：红色；
填充：20px；
盒影：0.4px 5px 0 rgba（0,0,0,0.14），0.1px 10px 0 rgba（0,0,0,0.12），0.2px 4px-1px rgba（0,0,0,0.3）；
}



{{item.name}-${{item.price}
删除


你确定吗？
对
大概
解决方案：具有动态CSS属性的绝对定位模式
您可以将vue的
$event
作为参数传递，从那里获取单击位置，然后更改绝对位置元素（在您的示例中为模态）的
top
和
left
CSS属性


代码
HTML:

CSS:

工作示例：
解决方案：具有动态CSS属性的绝对定位模式
您可以将vue的
$event
作为参数传递，从那里获取单击位置，然后更改绝对位置元素（在您的示例中为模态）的
top
和
left
CSS属性


代码
HTML:

CSS:

工作示例：
如果代码在表中而不是列表中，您知道如何调整代码吗？比如这里：我认为event.target是按钮，但我不知道为什么它不能在表中工作。非常感谢您的帮助@CatarinaNogueira确保您的
按钮
具有
位置：相对您知道如果在表中而不是列表中，如何调整您的代码吗？比如这里：我认为event.target是按钮，但我不知道为什么它不能在表中工作。非常感谢您的帮助@CatarinaNogueira确保您的
按钮
具有
位置：相对抱歉，我认为您的小提琴没有在视频中正常工作：/抱歉，我认为您的小提琴没有在视频中正常工作：/
 var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ]
  },
   methods: { 
           deleteLeader: function(index,item){
                    this.inventory.splice(index,1);
            }
           }

});

<div id="vue-instance">
  <ul>
    <li v-for="(index, item) in inventory">
      {{ item.name }} - ${{ item.price }}
      <button @click="deleteLeader(index, item, $event)"> delete</button>
    </li>
  </ul>
  <div id="modal" class="hidden">
    Hello, I'm a modal!
  </div>
</div>

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ]
  },
   methods: { 
           deleteLeader: function(index,item,event){
                    // maybe at this point you'd want to rename this method's name
                    this.inventory.splice(index,1);

                    var modal = document.getElementById("modal");
                    modal.style.top = event.clientY + "px";
                    modal.style.left = event.clientX + "px";
                    modal.classList.remove("hidden");
            }
           }

});

#modal {
  padding: 5px;
  position: absolute;
  background: red;
  border-radius: 10px;
  color: #fff;
}

.hidden {
  display: none;
}