In the Vue project, how can you click anywhere except itself to hide the pre-queried List in a component?
The code is as follows:
1. Data binding:
2. Event binding:
3. Some students will say that the input box is set to lose focus event, but the list shown in the figure shows ,, If you want to click to select the value in the list, the input will lose focus first, and it will appear that the list value cannot be selected.,,
4. Dear students passing by, take a look
My projects
mounted () {
/***
* 使得其點(diǎn)擊之外的部分自動(dòng)收起
*/
document.addEventListener('click', (e) => {
if (!this.$el.contains(e.target)) {
this.reset()
}
})
}
It means to click on the area that is not within this component to close the pop-up box. Of course, you can change this.$el to a ref to judge
document.addEventListener('click', function(e){
//通過判斷e.target 來判斷點(diǎn)擊的元素 當(dāng)不屬于下拉框和輸入框的時(shí)候 隱藏下拉框
})
After thinking about it, I think Out of focus is still a relatively ideal event.
As for what you saidIf you want to click on the value in the selected list, the input will lose focus first, and the list value will not be selected.
Add code to the bound focusout
event As follows
eventHandler (event) {
event.preventDefault()
// 這里設(shè)置input 綁定的data
this.bisible = false
}
This should solve the problem.