mirror of https://github.com/ElemeFE/element
Popover: fix click trigger
parent
64f154839c
commit
8fa549894b
|
@ -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() {
|
||||
|
|
|
@ -27,4 +27,10 @@
|
|||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@include e(reference) {
|
||||
&:focus:not(.focusing), &:focus:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue