【Electron-Vue】构建桌面应用（38）- 事件的优先级导致点击事件无效

最近在使用Electron-vue做项目的时候发现，给隐藏域中的list添加click事件，无法获取到点击的值，在相应的函数中打印信息，并没有获得输出信息，也就是说可能压根就没有触发click事件。

讲一下我的需求：在客户端登陆成功后，记录用户使用过的地址和端口号，以便用户下次登录时，可以直接从下拉菜单中选择。

由于前面的组件封装了关于表单的校验，以脱离文档流position:absolute的方式给出用户输入信息，而现在需要做的用于展示用户输入过的地址集合也是通过这种方式去展示。

具体的思路是：

1. 当用户点击输入框时，为输入框获取到焦点事件，这时去判断有无已输入的地址数据集合。
2. 如果有，则显示该list列表，并给每个item绑定点击事件，触发点击事件后，将获取的值传给父组件。
3. 如果没有，则根据用户输入的信息，判断输入的地址格式是否正确，给出响应的提示。
4. 可以根据用户输入的信息，去实时匹配用户输入过的保存的地址列表，以便用户查询之用。
5. 当用户输入的数据能匹配到时，此时的list列表的优先级应高于校验信息，即不管输入的地址合不合法，都应该先显示匹配到的列表集合。只要当什么都没匹配到时，才去显示校验信息。失去焦点的时候，应该影藏list和校验信息。

思路清晰之后，就开始动手写代码，由于用到的地方不止一处，所以做了一个封装，将输入框，校验以及显示匹配的列表封装到一个组件中，代码如下：

<template>
  <a-form-model-item class="wapper">
    <a-input
      :placeholder="placeholder"
      v-model="value"
      @change="changeValue"
      @focus="showDiv(true)"
      @blur="showDiv(false)"
    >
      <a-icon slot="prefix" type="global" v-show="type !== 'port'" />
    </a-input>
    <item-check :status="isShowErr" :msg="errorMsg" />
    <div class="wapper-select" v-show="isShow">
      <div
        class="wapper-item"
        v-for="(item, index) in items"
        :key=