浏览代码

Popover: add after transition events

Leopoldthecoder 7 年之前
父节点
当前提交
09cc5be758
共有 4 个文件被更改,包括 20 次插入29 次删除
  1. 3 4
      examples/docs/en-US/popover.md
  2. 3 4
      examples/docs/es/popover.md
  3. 3 20
      examples/docs/zh-CN/popover.md
  4. 11 1
      packages/popover/src/main.vue

+ 3 - 4
examples/docs/en-US/popover.md

@@ -88,10 +88,7 @@
           date: '2016-05-07',
           name: 'Jack',
           address: 'New York City'
-        }],
-        singleSelection: {},
-        multipleSelection: [],
-        model: ''
+        }]
       };
     }
   };
@@ -245,4 +242,6 @@ Of course, you can nest other operations. It's more light-weight than using a di
 | Event Name | Description | 回调参数 |
 |---------|--------|---------|
 | show | triggers when popover shows | — |
+| after-enter | triggers when the entering transition ends | — |
 | hide | triggers when popover hides | — |
+| after-leave | triggers when the leaving transition ends | — |

+ 3 - 4
examples/docs/es/popover.md

@@ -88,10 +88,7 @@
           date: '2016-05-07',
           name: 'Jack',
           address: 'New York City'
-        }],
-        singleSelection: {},
-        multipleSelection: [],
-        model: ''
+        }]
       };
     }
   };
@@ -244,4 +241,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | Nombre del evento | Descripción                             | Parámetros |
 | ----------------- | --------------------------------------- | ---------- |
 | show              | se dispara cuando se muestra el popover | —          |
+| after-enter       | triggers when the entering transition ends | —       |
 | hide              | se dispara cuando se oculta el popover  | —          |
+| after-leave       | triggers when the leaving transition ends | —        |

+ 3 - 20
examples/docs/zh-CN/popover.md

@@ -74,27 +74,8 @@
           date: '2016-05-07',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
-        }],
-        singleSelection: {},
-        multipleSelection: [],
-        model: ''
+        }]
       };
-    },
-
-    watch: {
-      singleSelection(val) {
-        console.log('selection: ', val);
-      },
-
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    },
-
-    events: {
-      handleClick(row) {
-        console.log('you clicked ', row);
-      }
     }
   };
 </script>
@@ -258,4 +239,6 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
 | show | 显示时触发 | — |
+| after-enter | 显示动画播放完毕后触发 | — |
 | hide | 隐藏时触发 | — |
+| after-leave | 隐藏动画播放完毕后触发 | — |

+ 11 - 1
packages/popover/src/main.vue

@@ -1,6 +1,9 @@
 <template>
   <span>
-    <transition :name="transition" @after-leave="doDestroy">
+    <transition
+      :name="transition"
+      @after-enter="handleAfterEnter"
+      @after-leave="handleAfterLeave">
       <div
         class="el-popover el-popper"
         :class="[popperClass, content && 'el-popover--plain']"
@@ -190,6 +193,13 @@ export default {
         !popper ||
         popper.contains(e.target)) return;
       this.showPopper = false;
+    },
+    handleAfterEnter() {
+      this.$emit('after-enter');
+    },
+    handleAfterLeave() {
+      this.$emit('after-leave');
+      this.doDestroy();
     }
   },