input输入中文时，偶先触发上层mouseleave的问题

业务场景：

1、弹窗中有input输入框 2、弹窗监听mouseleave，当鼠标移出弹窗区域后，主动触发取消弹窗展示

<template>
  <div>
    <button @click="showDialog"></button>
    <!-- 弹窗 -->
    <div @mouseleave="selectLeave" v-if="isShow">
      <input />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    showDialog() {
      this.isShow = true;
    },
    selectLeave() {
      this.isShow = false;
    }
  }
};
</script>

问题：

用户在输入框中输入中文时，偶现触发弹窗的mouseleave事件，造成弹窗关闭

问题产生的原因：

用户使用了三方输入法（测试使用了搜狗输入法），当输入中文唤起键盘并且键盘正好出现在鼠标所在的位置，导致弹窗失去了鼠标的焦点

解决方法：

1、初始解决方案：
①、定义一个全局变量isComposing：false
②、监听输入中文时的compositionstart，compositionend，当compositionstart时isComposing赋值为true ,compositionend时isComposing赋值为false
③、在selectLeave中判断isComposing为false时，才触发弹窗关闭
使用三方键盘输入中文时，并不会触发compositionstart，compositionend的监听事件
2、尽量避免使用监听鼠标移出的方式关闭弹窗，最好使用click点击弹窗之外区域的方式