mirror of https://github.com/ElemeFE/element
Popover: fix click trigger
parent
64f154839c
commit
8fa549894b
|
@ -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() {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue