javascript - Vue專案中如何讓預先查詢的顯示框隱藏
为情所困
为情所困 2017-06-26 10:52:22
0
4
775

Vue項目中,某個元件中的預先查詢的List清單如何點選除它本身外任意地方使該清單隱藏?


程式碼如下:
1.資料綁定處:

2.事件綁定:



3.有的同學會說,將輸入框設定失去焦點事件,,但如圖的清單顯示,,想要點選選取清單的數值,會是的input先失去焦點,,會照成無法選取清單值的情況發生,,,
4.各位路過的同學,壟一眼啦

为情所困
为情所困

全部回覆 (4)
女神的闺蜜爱上我

我的專案

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

意思就是點選不在這個元件內的區域收起彈出框,當然你可以把this.$el改成一個ref來判斷

    世界只因有你

    雷雷

      世界只因有你

      考慮了之後我覺得失焦還是一個比較理想的事件。
      至於你說的
      想要點擊選中列表的值,會是的input先失去焦點,,會照成無法選中列表值的情況發生,,,
      在綁定的focusout事件上添加代碼如下

      eventHandler (event) { event.preventDefault() // 这里设置input 绑定的data this.bisible = false }

      這樣應該可以解決問題。

        女神的闺蜜爱上我

        嗯,那個人說的跟我的一樣

          最新下載
          更多>
          網站特效
          網站源碼
          網站素材
          前端模板
          關於我們 免責聲明 Sitemap
          PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!