vue--点击空白处隐藏悬浮框

项目中经常遇到要展示dialog弹框的情况，通常我们只需要点击打开按钮显示，点击关闭按钮关闭弹框，

但是也会遇到这种需求，需要点击空白处或者点击除指点区域外时，弹框也会消失，以提升用户体验

这次项目中遇到的是PC端点击输入框获取焦点时出现软键盘，失去焦点或者点击其他区域（除软键盘、输入框以外），软键盘消失。

话不多说，直接上代码：　

这里示例三个input输入框

<Input placeholder="例:沪A88888"  @on-focus="keyBoardFocus('add')" class="input" v-model="formNewAppointment.carNum"/>
<Input  class="input"/> 
<Input  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
  }
},

做了一个简单的项目笔记，仅供参考，项目中还有很多的例子，比如菜单的展示，可控制提示框等等