悬停时出现多个 vue 弹出框

Posted 2023-02-22

【中文标题】悬停时出现多个 vue 弹出框

【英文标题】：Multiple vue popover on hover

【发布时间】：2020-01-10 20:40:41

【问题描述】：

我为组件添加了 vue Element UI 库，它在单个实例上工作正常，但是当我使用它几次或多次时它就不起作用了！

这里是详细概述

var Main = 
  data() 
    return 
      visible: false
    ;
  
;
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
  <template>
 

<div>
   <el-popover
    ref="popover"
    placement="right"
    title="Title"
    
    trigger="hover"
    content="this is content, this is content, this is content">
    
 
  </el-popover>
   <el-button v-popover:popover>Focus to activate</el-button>
</div>
    
    <br/><br/>
    
<div>
   <el-popover
    ref="popover1"
    placement="right"
    title="Title"
    
    trigger="hover"
    content="this is content, this is content, this is content">
    
 
  </el-popover>
   <el-button v-popover:popover1>Focus to activate</el-button>
</div>
 

 
</template>
</div>

每个弹出框的 ID 必须是唯一的 https://element.eleme.io/#/en-US/component/installation

【问题讨论】：

您是否尝试过为每个弹出框元素使用唯一的引用？由于相同的参考，您似乎同时获得所有弹出窗口。

不，我不知道该怎么做？

试试这个建议，看看它是否有效。但从文档看来它是参考？？？？

【参考方案1】：

您的reference 必须是唯一的。

var Main = 
  data() 
    return 
      visible: false
    ;
  
;
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
  <template>
 

<div>
   <el-popover
    ref="popover"
    placement="right"
    title="Title"
    
    trigger="hover"
    content="this is content, this is content, this is content">
    
 
  </el-popover>
   <el-button v-popover:popover>Focus to activate</el-button>
</div>
    
    <br/><br/>
    
<div>
   <el-popover
    ref="popover2"
    placement="right"
    title="Title"
    
    trigger="hover"
    content="this is content, this is content, this is content">
    
 
  </el-popover>
   <el-button v-popover:popover2>Focus to activate</el-button>
</div>
 

 
</template>
</div>

【讨论】：

很好！如果我有无限组件那么我该如何处理ref="popover2" 属性？

当然，每个人都有唯一的 ID。我确定您会使用某种数组来填充列表，并且索引可以为您的每个元素提供唯一性。

@Momin 你可以在v-for 中使用key 来生成唯一的ref。或在el-popover 中使用<el-button slot="reference">Click to activate</el-button> 并删除ref。 example