vue弹出框组件关闭并销毁

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue弹出框组件关闭并销毁相关的知识,希望对你有一定的参考价值。

参考技术A 最近做一个功能,弹出框里面还使用了其他的组件。

步骤一:第一次打开页面,打开弹出框,一切正常。

关掉弹出框,再打开,还是正常。

步骤二:打开别的菜单,别的菜单正常显示

步骤三:重复步骤一的操作,此时弹出框不再正常。

我就怀疑是缓存导致的。

解决办法:

<dialog-component :show.sync=“dialogShow” v-if=“dialogShow”/>

说明:v-if=“dialogShow”就可以让页面在弹出框关闭的时候销毁弹出框,从而清理缓存。

悬停时出现多个 vue 弹出框

【中文标题】悬停时出现多个 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 中使用&lt;el-button slot="reference"&gt;Click to activate&lt;/el-button&gt; 并删除ref。 example

以上是关于vue弹出框组件关闭并销毁的主要内容,如果未能解决你的问题,请参考以下文章

完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题

layui 子弹出框操作成功后, 刷新父弹出框的内容

基于vue以及vuex的dialog弹出框公共组件

Vue父组件如何调用子组件(弹出框)中的方法的问题

vue拦截路由回退弹出弹框

element plus中组件Popover弹出框点击内容区关闭弹出框的解决办法