Merge pull request #33 from QingWei-Li/fix/popover

Popover: add reference slot

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>
 ```
 :::
 

packages/popover/src/main.vue

@@ -1,4 +1,5 @@
 <template>
+  <span>
     <transition :name="transition">
       <div
         class="el-popover"
@@ -9,6 +10,8 @@
         <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');

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) {