How do all the item in the list share the same component?

clipboard.png
such as the above requirement, each reject button needs to have a corresponding small Modal component. At present, I have set up a Modal

in each Item component. 
// Item.js
<li>
  <Modal v-if="isShow">
</li>

but I don"t think it is necessary to generate a separate Modal. for each "reject" button Because there"s only one at the same time. But the question is, if I put this Modal in the parent component of the List (Item component, how should I control the location of the Modal (click a reject button and it will appear in the corresponding place)?

Vue.js react.js javascript
Mar.23,2022

getBoundingClientRect to learn about

in fact, you all use v-if and you don't have to consider multiple modal situations at all, because v-if itself is to add and delete this DOM node, you just need to locate it, and for each location you can get the element position of the reject button clicked through the js code, calculate the offset, and then set it. Of course, v-if has switching overhead, which can be ignored if it does not affect the normal loading of the page. About the portal in 

data: {
    return {
     modelPotion: {
         left: 0,
         top: 0,
     }
     activeModelIndex: false,
     curItem: ''
    }
}

<li>
  <span></span>
  <span @click="handleRefuse($event,item)"></span>
</li>

// 
<Modal v-if="activeModelIndex" :item="curItem" :style="{ left: `${modelPotion.left}px`,top: `${modelPotion.top}px`}">


handleRefuse(event,item){
    console.log(event) //
    this.modelPotion = {
        left: event.x
        top: event.y
    }
    this.activeModelIndex = true
    this.curItem = item
}

React16?

Previous: Android JAVA serial port read and write available and read function match exception

Next: Python3.6.6 's requests library sends https requests, which causes memory leaks and win10,ubuntu16.04.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu