Element: 建议：popover中v-popover指令的写法修改成v-popover="popovername"

[acelan86]

原因：
在table-column中配置每一行显示不同的popover，如下：

     <x-table-column
        label="姓名"
        sortable
        width="180"
        inline-template>
        <div>
          <x-popover placement="top" :ref="'list-pop-' + $index" trigger="click">
            {{row.address}}
          </x-popover>
          <span v-popover.我不知道怎么写这个，这里只能hardcode>{{ row.name }}</span>
        </div>
      </x-table-column>

如果改成v-ppoover=""的指令就方便了

      <x-table-column
        label="姓名"
        sortable
        width="180"
        inline-template>
        <div>
          <x-popover placement="top" :ref="'list-pop-' + $index" trigger="click">
            {{row.address}}
          </x-popover>
          <span v-popover="'list-pop-' + $index">{{ row.name }}</span>
        </div>
      </x-table-column>

如果不改动，无法实现循环创建popover的例子，但是确实是有这种需求

简单修改下popover的指令定义即可

Vue.directive('popover', {
  bind (el, binding, vnode) {
    vnode.context.$refs[binding.value].$refs.reference = el
  }
})

或者，如果我要实现上文的需求，是否有其他解决方案？求指点

[QingWei-Li]

可以通过 slot 指定 reference，这种方式感觉更适合用在需要遍历的地方

<el-popover
  placement="right"
  title="标题"
  width="200"
  trigger="focus"
  content="这是一段容,这是一段容,这是一段容,这是一段容。">
  <el-button slot="reference">focus 激活</el-button>
</el-popover>

[acelan86]

get，谢谢

[sinceow]

但如果Content并不是一段字符串，而是模板内容呢？通过 slot 怎么解决？

[Leopoldthecoder]

@sinceow 用默认 slot 分发：http://jsfiddle.net/leopoldthecuber/0c8wbyej/

[hawtim]

我在el-tree中通过renderContent使用el-popover, 激活的方式使用slot="reference"，发现点击时点击事件会冒泡导致el-tree的node会响应点击事件，请问有什么办法可以解决么？

[iHaPBoy]

@hawtim +1，如果你不需要点击 popover 的内容时不隐藏，你可以使用 trigger="manual" 来手动控制。

另外求助：

只有 trigger 为 click 时，点击 popover 的内容的时候不会隐藏，用 hover / focus/ manual 时点击内容会隐藏。我希望点击内容时不会隐藏，所以使用 click，但是 click 会冒泡。

我在其父元素已经绑定了 click 事件，导致使用 trigger="click" 会冒泡，请问有什么办法可以阻止冒泡吗，用 manual 似乎没办法手动控制点击点击 popover 内容时不隐藏。

[hawtim]

@iHaPBoy 时隔许久看到你的回复，十分感谢。
我已经找到解决方案，建议你使用slot reference 然后用 on-click={($event) => this.clickHandler($event, data)} 在clickHandler 中阻止冒泡即可

[MakerLZZ]

@hawtim 按你的方案 点击reference弹出popover 使用 preventDefault 父级不会触发点击事件了 但是点击其他循环列表中绑定的reference 原来已经显示的就不会隐藏 因为clickHandler方法中阻止冒泡了（阻止隐藏其他popover的事件） 现在这个新产生的问题如何解决？

[littleAnn]

可以通过 slot 指定 reference，这种方式感觉更适合用在需要遍历的地方

<el-popover
  placement="right"
  title="标题"
  width="200"
  trigger="focus"
  content="这是一段容,这是一段容,这是一段容,这是一段容。">
  <el-button slot="reference">focus 激活</el-button>
</el-popover>

这种方式会影响布局，会给要popover的元素套一层span元素，一般使用确实可以了，如果更复杂的布局会被影响