github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tooltip: move event handlers adding to the mounted hook (#9336)

pull/9343/head
杨奕 2018-01-18 14:09:25 +08:00 committed by FuryBean
parent 2880132de8
commit 3fffdd1534
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/tooltip/src/main.js
View File

@ -1,6 +1,6 @@
import Popper from 'element-ui/src/utils/vue-popper'; import Popper from 'element-ui/src/utils/vue-popper';
import debounce from 'throttle-debounce/debounce'; import debounce from 'throttle-debounce/debounce';
import { addClass, removeClass } from 'element-ui/src/utils/dom'; import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom';
import { getFirstComponentChild } from 'element-ui/src/utils/vdom'; import { getFirstComponentChild } from 'element-ui/src/utils/vdom';
import { generateId } from 'element-ui/src/utils/util'; import { generateId } from 'element-ui/src/utils/util';
import Vue from 'vue'; import Vue from 'vue';
@ -101,15 +101,8 @@ export default {
if (!vnode) return vnode; if (!vnode) return vnode;
const data = vnode.data = vnode.data || {}; const data = vnode.data = vnode.data || {};
const on = vnode.data.on = vnode.data.on || {};
const nativeOn = vnode.data.nativeOn = vnode.data.nativeOn || {};
data.staticClass = this.concatClass(data.staticClass, 'el-tooltip'); data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
nativeOn.mouseenter = on.mouseenter = this.addEventHandle(on.mouseenter, this.show);
nativeOn.mouseleave = on.mouseleave = this.addEventHandle(on.mouseleave, this.hide);
nativeOn.focus = on.focus = this.addEventHandle(on.focus, this.handleFocus);
nativeOn.blur = on.blur = this.addEventHandle(on.blur, this.handleBlur);
nativeOn.click = on.click = this.addEventHandle(on.click, () => { this.focusing = false; });
return vnode; return vnode;
}, },
@ -118,6 +111,11 @@ export default {
if (this.$el.nodeType === 1) { if (this.$el.nodeType === 1) {
this.$el.setAttribute('aria-describedby', this.tooltipId); this.$el.setAttribute('aria-describedby', this.tooltipId);
this.$el.setAttribute('tabindex', 0); this.$el.setAttribute('tabindex', 0);
on(this.referenceElm, 'mouseenter', this.show);
on(this.referenceElm, 'mouseleave', this.hide);
on(this.referenceElm, 'focus', this.handleFocus);
on(this.referenceElm, 'blur', this.handleBlur);
on(this.referenceElm, 'click', this.removeFocusing);
} }
}, },
watch: { watch: {
@ -147,14 +145,8 @@ export default {
this.focusing = false; this.focusing = false;
this.hide(); this.hide();
}, },
addEventHandle(old, fn) { removeFocusing() {
if (!old) { this.focusing = false;
return fn;
} else if (Array.isArray(old)) {
return old.indexOf(fn) > -1 ? old : old.concat(fn);
} else {
return old === fn ? old : [old, fn];
}
}, },
concatClass(a, b) { concatClass(a, b) {
@ -192,5 +184,14 @@ export default {
} }
this.expectedState = expectedState; this.expectedState = expectedState;
} }
},
destroyed() {
const reference = this.referenceElm;
off(reference, 'mouseenter', this.show);
off(reference, 'mouseleave', this.hide);
off(reference, 'focus', this.handleFocus);
off(reference, 'blur', this.handleBlur);
off(reference, 'click', this.removeFocusing);
} }
}; };