fix popover

examples/docs/popover.md

@@ -185,11 +185,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   ref="popover5"
   placement="top"
   width="160"
-  :visible.sync="visible2">
+  :visible="visible2">
   <p>这是一段内容这是一段内容确定删除吗？</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
+    <el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
+    <el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
   </div>
 </el-popover>
 
@@ -200,14 +200,14 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| trigger | 触发方式 | String  | 'click', 'focus', 'hover' |    click    |
+| trigger | 触发方式 | String  | click/focus/hover |    click    |
 |  title              | 标题 | String | — | — |
-|  content        |  显示的内容，也可以通过 `slot#` 传入 DOM   | String            | — | — |
+|  content        |  显示的内容，也可以通过 `slot` 传入 DOM   | String            | — | — |
 |  width        |  宽度  | String, Number            | — | 最小宽度 150px |
-|  placement        |  出现位置  | String           |  `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` |  bottom |
+|  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
 |  visible        |  初始状态是否可见  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
-|  transition     |  定义渐变动画      | String             | — | `fade-in-linear` |
+|  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 

packages/popover/src/main.vue

@@ -54,52 +54,53 @@ export default {
   },
 
   mounted() {
-    let _timer;
-    const reference = this.reference || this.$refs.reference;
-
-    this.$nextTick(() => {
-      if (this.trigger === 'click') {
-        on(reference, 'click', () => { this.showPopper = !this.showPopper; });
-        on(document, 'click', (e) => {
-          if (!this.$el ||
-              !reference ||
-              this.$el.contains(e.target) ||
-              reference.contains(e.target)) return;
-          this.showPopper = false;
-        });
-      } else if (this.trigger === 'hover') {
-        on(reference, 'mouseenter', () => {
-          this.showPopper = true;
-          clearTimeout(_timer);
-        });
-        on(reference, 'mouseleave', () => {
-          _timer = setTimeout(() => {
+    setTimeout(() => {
+      let _timer;
+      const reference = this.reference || this.$refs.reference;
+      this.$nextTick(() => {
+        if (this.trigger === 'click') {
+          on(reference, 'click', () => { this.showPopper = !this.showPopper; });
+          on(document, 'click', (e) => {
+            if (!this.$el ||
+                !reference ||
+                this.$el.contains(e.target) ||
+                reference.contains(e.target)) return;
             this.showPopper = false;
-          }, 200);
-        });
-      } else {
-        if ([].slice.call(reference.children).length) {
-          const children = reference.childNodes;
+          });
+        } else if (this.trigger === 'hover') {
+          on(reference, 'mouseenter', () => {
+            this.showPopper = true;
+            clearTimeout(_timer);
+          });
+          on(reference, 'mouseleave', () => {
+            _timer = setTimeout(() => {
+              this.showPopper = false;
+            }, 200);
+          });
+        } else {
+          if ([].slice.call(reference.children).length) {
+            const children = reference.childNodes;
 
-          for (let i = 0; i < children.length; i++) {
-            if (children[i].nodeName === 'INPUT') {
-              on(children[i], 'focus', () => { this.showPopper = true; });
-              on(children[i], 'blur', () => { this.showPopper = false; });
-              break;
+            for (let i = 0; i < children.length; i++) {
+              if (children[i].nodeName === 'INPUT') {
+                on(children[i], 'focus', () => { this.showPopper = true; });
+                on(children[i], 'blur', () => { this.showPopper = false; });
+                break;
+              }
             }
-          }
-        } else if (
-            reference.nodeName === 'INPUT' ||
-            reference.nodeName === 'TEXTAREA'
+          } else if (
+              reference.nodeName === 'INPUT' ||
+              reference.nodeName === 'TEXTAREA'
           ) {
-          on(reference, 'focus', () => { this.showPopper = true; });
-          on(reference, 'blur', () => { this.showPopper = false; });
-        } else {
-          on(reference, 'mousedown', () => { this.showPopper = true; });
-          on(reference, 'mouseup', () => { this.showPopper = false; });
+            on(reference, 'focus', () => { this.showPopper = true; });
+            on(reference, 'blur', () => { this.showPopper = false; });
+          } else {
+            on(reference, 'mousedown', () => { this.showPopper = true; });
+            on(reference, 'mouseup', () => { this.showPopper = false; });
+          }
         }
-      }
-    });
+      });
+    }, 100);
   },
 
   destroyed() {