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