亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - How to hide the pre-query display box in Vue project
為情所困
為情所困 2017-06-26 10:52:22
0
4
942

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

為情所困
為情所困

reply all(4)
女神的閨蜜愛上我

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 said
If 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.

女神的閨蜜愛上我

Well, what that person said is the same as mine

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template