Popover: add after transition events

pull/10064/head
Leopoldthecoder 2018-03-07 12:24:34 +08:00 committed by 杨奕
parent e92d1d13aa
commit 09cc5be758
4 changed files with 20 additions and 29 deletions

View File

@ -88,10 +88,7 @@
date: '2016-05-07', date: '2016-05-07',
name: 'Jack', name: 'Jack',
address: 'New York City' 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 | 回调参数 | | Event Name | Description | 回调参数 |
|---------|--------|---------| |---------|--------|---------|
| show | triggers when popover shows | — | | show | triggers when popover shows | — |
| after-enter | triggers when the entering transition ends | — |
| hide | triggers when popover hides | — | | hide | triggers when popover hides | — |
| after-leave | triggers when the leaving transition ends | — |

View File

@ -88,10 +88,7 @@
date: '2016-05-07', date: '2016-05-07',
name: 'Jack', name: 'Jack',
address: 'New York City' 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 | | Nombre del evento | Descripción | Parámetros |
| ----------------- | --------------------------------------- | ---------- | | ----------------- | --------------------------------------- | ---------- |
| show | se dispara cuando se muestra el popover | — | | show | se dispara cuando se muestra el popover | — |
| after-enter | triggers when the entering transition ends | — |
| hide | se dispara cuando se oculta el popover | — | | hide | se dispara cuando se oculta el popover | — |
| after-leave | triggers when the leaving transition ends | — |

View File

@ -74,27 +74,8 @@
date: '2016-05-07', date: '2016-05-07',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' 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> </script>
@ -258,4 +239,6 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------|--------|---------| |---------|--------|---------|
| show | 显示时触发 | — | | show | 显示时触发 | — |
| after-enter | 显示动画播放完毕后触发 | — |
| hide | 隐藏时触发 | — | | hide | 隐藏时触发 | — |
| after-leave | 隐藏动画播放完毕后触发 | — |

View File

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