javascript – So verbergen Sie das Anzeigefeld vor der Abfrage im Vue-Projekt
为情所困
为情所困 2017-06-26 10:52:22
0
4
818

Wie kann ich im Vue-Projekt die vorab abgefragte Liste in einer Komponente ausblenden, indem ich auf eine beliebige Stelle außer sich selbst klicke?


Der Code lautet wie folgt:
1. Datenbindung:

2


3. Einige Schüler werden sagen, dass das Eingabefeld den Fokus verliert, aber wie in der Liste in der Abbildung gezeigt, klicken Sie auf den Wert in der ausgewählten Liste wird zuerst den Fokus verlieren, es scheint, dass der Listenwert nicht ausgewählt werden kann,,,
4 Liebe Schüler, die vorbeikommen, werfen Sie einen Blick darauf

为情所困
为情所困

Antworte allen(4)
女神的闺蜜爱上我

我的项目

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

意思就是点击不在这个组件内的区域收起弹出框,当然你可以把this.$el改成一个ref来判断

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

考虑了之后我觉得 失焦 还是一个比较理想的事件。
至于你说的
想要点击选中列表的值,会是的input先失去焦点,,会照成无法选中列表值的情况发生,,,
在绑定的 focusout事件上添加代码如下

eventHandler (event) {
  event.preventDefault()

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

这样应该可以解决问题。

女神的闺蜜爱上我

嗯,那个人说的跟我的一样

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!