Question

我为组件添加了vue 元素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"
    width="200"
    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"
    width="200"
    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

Answer 1

您的Copy always必须是唯一的。

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");

悬停时有多个vue弹出框

1 个答案: