自定义导航栏菜单失焦

一个简单的效果，点击导航栏弹出菜单后，在菜单外点击触发失焦，自动关闭菜单

---

本文采用Vant组件
核心：通过触发菜单内的input聚焦失焦控制显示/隐藏

导航栏：

菜单：

    

        
{{ item }}
    
    

.nav-menu{
    position: fixed;
    top: 40px;
    right: 5px;
    input{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        margin: 0;
        border: none;
        outline: 0;
        opacity: 0;
        -webkit-appearence: none;
    }
}

事件：

export default{
    name: 'custom-nav',
    data(){
        return {
            isShowMenu: false,// 控制菜单
            menuList: ['操作1', '操作2'],// 菜单
        }
    },
    methods: {
        handleMenu(item){// 点击菜单项
            console.log(item)
        },
        menuBlur(){// 输入框失焦 =》 隐藏菜单
            this.isShowMenu = false
        },
        handleRight(){// 点击导航栏右侧
            this.isShowMenu = !this.isShowMenu
            // trigger焦点
            this.$nextTick(() => {
                if(this.$refs.MenuInput){
                    this.$refs.MenuInput.focus()
                }else{
                    this.$refs.MenuInput.blur()
                }
            })
        }
    }
}

问题：

1. 菜单栏点击事件handleMenu与输入框失焦menuBlur冲突

   由于js是单线程，所以两者无法同时进行，加个延迟

   menuBlur(){
       setTimeout(() => {
           this.isShowMenu = false;
       }, 100)
   }

2. 输入框聚焦同时弹出键盘
   如果把input类型设置为hidden反而不能聚焦，所以加个只读属性readonly

3. 其他组件同时出发失焦事件
   在用ElementUI的日期选择器时，其自带的@blur会上浮，不知道算不算bug。
   此处带上事件修饰符可解决