fix bug of AutoComplete that can not blur when click outside
This commit is contained in:
parent
139c4b518f
commit
9fa451d7c6
5 changed files with 43 additions and 6 deletions
|
@ -18,6 +18,9 @@
|
||||||
</div>
|
</div>
|
||||||
<a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
|
<a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
|
||||||
</AutoComplete>
|
</AutoComplete>
|
||||||
|
<!-- <Select v-model="model1" style="width:200px">-->
|
||||||
|
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
|
||||||
|
<!-- </Select>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -66,7 +69,34 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
cityList: [
|
||||||
|
{
|
||||||
|
value: 'New York',
|
||||||
|
label: 'New York'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'London',
|
||||||
|
label: 'London'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Sydney',
|
||||||
|
label: 'Sydney'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Ottawa',
|
||||||
|
label: 'Ottawa'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Paris',
|
||||||
|
label: 'Paris'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Canberra',
|
||||||
|
label: 'Canberra'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
model1: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
8
package-lock.json
generated
8
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iview",
|
"name": "iview",
|
||||||
"version": "3.4.2",
|
"version": "3.5.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -14191,9 +14191,9 @@
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"v-click-outside-x": {
|
"v-click-outside-x": {
|
||||||
"version": "3.7.1",
|
"version": "4.0.19",
|
||||||
"resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-4.0.19.tgz",
|
||||||
"integrity": "sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg=="
|
"integrity": "sha512-QY2XhLJWDCypJKJz+FftvpYa1nzq7mzUP756H7ucu89c/8Rx1aog9gOhPEwDK16A+y3LGvPuAYScKr6/7xh18Q=="
|
||||||
},
|
},
|
||||||
"v8flags": {
|
"v8flags": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
"lodash.throttle": "^4.1.1",
|
"lodash.throttle": "^4.1.1",
|
||||||
"popper.js": "^1.14.6",
|
"popper.js": "^1.14.6",
|
||||||
"tinycolor2": "^1.4.1",
|
"tinycolor2": "^1.4.1",
|
||||||
"v-click-outside-x": "^3.5.6"
|
"v-click-outside-x": "^4.0.19"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "^2.5.2"
|
"vue": "^2.5.2"
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
auto-complete
|
auto-complete
|
||||||
:remote-method="remoteMethod"
|
:remote-method="remoteMethod"
|
||||||
@on-change="handleChange"
|
@on-change="handleChange"
|
||||||
|
@on-clickoutside="handleClickOutside"
|
||||||
:transfer="transfer">
|
:transfer="transfer">
|
||||||
<slot name="input">
|
<slot name="input">
|
||||||
<i-input
|
<i-input
|
||||||
|
@ -167,6 +168,11 @@
|
||||||
this.currentValue = '';
|
this.currentValue = '';
|
||||||
this.$refs.select.reset();
|
this.$refs.select.reset();
|
||||||
this.$emit('on-clear');
|
this.$emit('on-clear');
|
||||||
|
},
|
||||||
|
handleClickOutside () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.input.blur();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -544,6 +544,7 @@
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.hideMenu();
|
this.hideMenu();
|
||||||
this.isFocused = true;
|
this.isFocused = true;
|
||||||
|
this.$emit('on-clickoutside', event);
|
||||||
} else {
|
} else {
|
||||||
this.caretPosition = -1;
|
this.caretPosition = -1;
|
||||||
this.isFocused = false;
|
this.isFocused = false;
|
||||||
|
|
Loading…
Add table
Reference in a new issue