javascript - Comment masquer la zone d'affichage de pré-requête dans le projet Vue

Question

Dans le projet Vue, comment masquer la liste pré-interrogeée dans un composant en cliquant n'importe où sauf lui-même ?

Le code est le suivant :
1. Liaison des données :

2.

3. Certains étudiants diront que définir la zone de saisie pour perdre le focus, mais comme le montre la liste de la figure, si vous souhaitez cliquer sur la valeur dans la liste sélectionnée, la saisie perdra le focus en premier, il apparaîtra que la valeur de la liste ne peut pas être sélectionnée,,,
Chers étudiants de passage, jetez un œil
.

Answer 1

Mes projets

mounted () {
      /***
       * 使得其点击之外的部分自动收起
       */
      document.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)) {
          this.reset()
        }
      })
    }

Cela signifie cliquer sur la zone qui ne se trouve pas dans ce composant pour fermer la boîte contextuelle. Bien sûr, vous pouvez changer ceci.$el en une référence pour juger

.

Answer 2

document.addEventListener('click', function(e){
    //通过判断e.target 来判断点击的元素 当不属于下拉框和输入框的时候 隐藏下拉框
})

Answer 3

Après réflexion, je pense que Out of focus reste un événement relativement idéal.
Quant à ce que vous avez dit
Si vous souhaitez cliquer sur la valeur dans la liste sélectionnée, l'entrée perdra d'abord le focus et la valeur de la liste ne sera pas sélectionnée,,,,想要点击选中列表的值，会是的input先失去焦点，，会照成无法选中列表值的情况发生，，，
在绑定的 focusoutDans la limite focusout

eventHandler (event) {
  event.preventDefault()

  // 这里设置input 绑定的data
  
  this.bisible = false
}

Cela devrait résoudre le problème.

Answer 4

Eh bien, ce que cette personne a dit est la même chose que le mien