vue--點擊空白處隱藏懸浮框

項目中經常遇到要展示dialog彈框的情況，通常我們只需要點擊打開按鈕顯示，點擊關閉按鈕關閉彈框，

但是也會遇到這種需求，需要點擊空白處或者點擊除指點區域外時，彈框也會消失，以提升用戶體驗

這次項目中遇到的是PC端點擊輸入框獲取焦點時出現軟鍵盤，失去焦點或者點擊其他區域（除軟鍵盤、輸入框以外），軟鍵盤消失。

話不多說，直接上代碼：　

這里示例三個input輸入框

<Input placeholder="例:滬A88888" id="carNumIpt" @on-focus="keyBoardFocus('add')" class="input" v-model="formNewAppointment.carNum"/>
<Input id="bookCarIpt" class="input"/> 
<Input id="enterCarIpt" class="input"/>

<!--軟鍵盤-->
<Keyboard ref="keyboard" class="keyboard" :plateNumber.sync="plateNumber" @change="change"></Keyboard>

mounted() {
    document.addEventListener('click', this.globalClick);
},
destroyed(){
    document.removeEventListener('click', this.globalClick);
},

//軟鍵盤失去焦點隱藏
globalClick(e) {
    let addCon = document.getElementById('carNumIpt');
    let bookCon = document.getElementById('bookCarIpt');
    let enterCon = document.getElementById('enterCarIpt');
    if(addCon || bookCon || enterCon){
        if(!addCon.contains(e.target) && !bookCon.contains(e.target) && !enterCon.contains(e.target)) {
            this.$refs.keyboard.globalClick(e);
        }else{
            
        }
    }
},

keyboard組件中的方法：

//js的contains方法用來查看dom元素的包含關系
globalClick(e) {
  if(!this.$el.contains(e.target) && this.isShow){
    this.isShow = false
  }
},

做了一個簡單的項目筆記，僅供參考，項目中還有很多的例子，比如菜單的展示，可控制提示框等等