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

View File

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