mirror of https://github.com/ElemeFE/element
Popover: add after transition events
parent
e92d1d13aa
commit
09cc5be758
|
@ -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 | 隐藏动画播放完毕后触发 | — |
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue