Commit 09cc5be7 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕

Popover: add after transition events

parent e92d1d13
......@@ -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 | — |
......@@ -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 | — |
......@@ -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 | 隐藏动画播放完毕后触发 | — |
<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();
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment