From a77b6850e179ee8b59277f36f9320c84fbc118ce Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Thu, 8 Sep 2016 11:21:17 +0800
Subject: [PATCH] Popover: add reference slot

---
 examples/docs/popover.md      | 12 +++++-------
 packages/popover/src/main.vue | 28 ++++++++++++++++------------
 src/utils/vue-popper.js       |  2 +-
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/examples/docs/popover.md b/examples/docs/popover.md
index 986f4a9f6..b603463f7 100644
--- a/examples/docs/popover.md
+++ b/examples/docs/popover.md
@@ -107,7 +107,7 @@
     .el-input {
       width: 360px;
     }
-    .el-button + .el-button {
+    .el-button {
       margin-left: 10px;
     }
   }
@@ -118,7 +118,7 @@
 ### 基础用法
 Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
 
-:::demo 必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。
+:::demo 设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。或者通过 `slot` 指定 reference。
 ```html
 <el-popover
   ref="popover1"
@@ -138,18 +138,16 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   content="这是一段容,这是一段容,这是一段容,这是一段容。">
 </el-popover>
 
+<el-button v-popover:popover1>hover 激活</el-button>
+<el-button v-popover:popover2>click 激活</el-button>
 <el-popover
-  ref="popover3"
   placement="right"
   title="标题"
   width="200"
   trigger="focus"
   content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  <el-button slot="reference">focus 激活</el-button>
 </el-popover>
-
-<el-button v-popover:popover1>hover 激活</el-button>
-<el-button v-popover:popover2>click 激活</el-button>
-<el-button v-popover:popover3>focus 激活</el-button>
 ```
 :::
 
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index a8f29d5d9..e5e777caa 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -1,14 +1,17 @@
 <template>
-  <transition :name="transition">
-    <div
-      class="el-popover"
-      ref="popper"
-      v-show="showPopper"
-      :style="{ width: width + 'px' }">
-      <div class="el-popover__title" v-if="title" v-text="title"></div>
-      <slot>{{ content }}</slot>
-    </div>
-  </transition>
+  <span>
+    <transition :name="transition">
+      <div
+        class="el-popover"
+        ref="popper"
+        v-show="showPopper"
+        :style="{ width: width + 'px' }">
+        <div class="el-popover__title" v-if="title" v-text="title"></div>
+        <slot>{{ content }}</slot>
+      </div>
+    </transition>
+    <slot name="reference"></slot>
+  </span>
 </template>
 
 <script>
@@ -56,7 +59,8 @@ export default {
   mounted() {
     setTimeout(() => {
       let _timer;
-      const reference = this.reference || this.$refs.reference;
+      const reference = this.reference || this.$refs.reference || this.$slots.reference[0].elm;
+
       this.$nextTick(() => {
         if (this.trigger === 'click') {
           on(reference, 'click', () => { this.showPopper = !this.showPopper; });
@@ -104,7 +108,7 @@ export default {
   },
 
   destroyed() {
-    const reference = this.reference || this.$refs.reference;
+    const reference = this.reference;
 
     off(reference, 'mouseup');
     off(reference, 'mousedown');
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
index df656d154..ec62be3d0 100644
--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@@ -63,7 +63,7 @@ export default {
 
       const options = this.options;
       const popper = this.popper || this.$refs.popper;
-      const reference = this.reference || this.$refs.reference;
+      const reference = this.reference || this.$refs.reference || this.$slots.reference[0].elm;;
 
       if (!popper || !reference) return;
       if (this.visibleArrow) {