drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize Poptip focus trigger when using input

Browse source 
optimize Poptip focus trigger when using input
This commit is contained in:
梁灏 2017-01-16 19:13:59 +08:00
parent 75e5c6a51e
commit 071506fc66
2 changed files with 51 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/poptip/poptip.vue
View file

@ -8,8 +8,8 @@
:class="[prefixCls + '-rel']"
v-el:reference
@click="handleClick"
@mousedown="handleFocus"
@mouseup="handleBlur">
@mousedown="handleFocus(false)"
@mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@ -91,7 +91,8 @@
data () {
return {
prefixCls: prefixCls,
showTitle: true
showTitle: true,
isInput: false
};
},
computed: {
@ -133,14 +134,14 @@
}
this.visible = false;
},
handleFocus () {
if (this.trigger !== 'focus' || this.confirm) {
handleFocus (fromInput = true) {
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = true;
},
handleBlur () {
if (this.trigger !== 'focus' || this.confirm) {
handleBlur (fromInput = true) {
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = false;
@ -164,12 +165,41 @@
ok () {
this.visible = false;
this.$emit('on-ok');
},
getInputChildren () {
const $input = this.$els.reference.querySelectorAll('input');
const $textarea = this.$els.reference.querySelectorAll('textarea');
let $children = null;
if ($input.length) {
$children = $input[0];
} else if ($textarea.length) {
$children = $textarea[0];
}
return $children;
}
},
ready () {
compiled () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
// if trigger and children is input or textarea,listen focus & blur event
if (this.trigger === 'focus') {
const $children = this.getInputChildren();
if ($children) {
$children.addEventListener('focus', this.handleFocus, false);
$children.addEventListener('blur', this.handleBlur, false);
this.isInput = true;
}
}
},
beforeDestroy () {
const $children = this.getInputChildren();
if ($children) {
$children.removeEventListener('focus', this.handleFocus, false);
$children.removeEventListener('blur', this.handleBlur, false);
}
}
};
</script>