Commit 8fa54989 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕

Popover: fix click trigger

parent 64f15483
...@@ -21,6 +21,7 @@ ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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() {
......
...@@ -27,4 +27,10 @@ ...@@ -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;
}
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment