Popover: fix click trigger

pull/8190/head
Leopoldthecoder 2017-11-12 19:52:36 +08:00 committed by 杨奕
parent 64f154839c
commit 8fa549894b
2 changed files with 15 additions and 17 deletions

View File

@ -21,6 +21,7 @@
<script>
import Popper from 'element-ui/src/utils/vue-popper';
import { on, off } from 'element-ui/src/utils/dom';
import { addClass, removeClass } from 'element-ui/src/utils/dom';
import { generateId } from 'element-ui/src/utils/util';
export default {
@ -59,14 +60,8 @@ export default {
}
},
watch: {
showPopper(newVal, oldVal) {
newVal ? this.$emit('show') : this.$emit('hide');
},
'$refs.reference': {
deep: true,
handler(val) {
console.log(val);
}
showPopper(val) {
val ? this.$emit('show') : this.$emit('hide');
}
},
@ -79,12 +74,12 @@ export default {
}
// 访
if (reference) {
reference.className += ' el-tooltip';
addClass(reference, 'el-popover__reference');
reference.setAttribute('aria-describedby', this.tooltipId);
reference.setAttribute('tabindex', 0); // tab
on(reference, 'focus', this.handleFocus);
on(reference, 'blur', this.handleBlur);
this.trigger !== 'click' && on(reference, 'focus', this.handleFocus);
this.trigger !== 'click' && on(reference, 'blur', this.handleBlur);
on(reference, 'keydown', this.handleKeydown);
on(reference, 'click', this.handleClick);
}
@ -135,17 +130,14 @@ export default {
this.showPopper = false;
},
handleFocus() {
const reference = this.referenceElm;
reference.className += ' focusing';
addClass(this.referenceElm, 'focusing');
this.showPopper = true;
},
handleClick() {
const reference = this.referenceElm;
reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
removeClass(this.referenceElm, 'focusing');
},
handleBlur() {
const reference = this.referenceElm;
reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
removeClass(this.referenceElm, 'focusing');
this.showPopper = false;
},
handleMouseEnter() {

View File

@ -27,4 +27,10 @@
line-height: 1;
margin-bottom: 12px;
}
@include e(reference) {
&:focus:not(.focusing), &:focus:hover {
outline-width: 0;
}
}
}