大家好，今天在写vue控件时，想实现点击下拉框之外的空白地方，实现触发事件。
网上目前有三种解决方案。
分别为：
1.采用计时器

<el-select v-model="scope.row.targetId" 
           :disabled="disabled" 
           clearable 
           placeholder="请选择"
           filterable
           automatic-dropdown
           @blur="blurSelect">

// el-select失去焦点必填校验
blurSelect(e) {
  setTimeout(()=> {
    if(!e.target.value) {
      this.$message.warning('请选择必填项!')
    }
  },1000)
},

2.采用focus来获取blur

<el-select
  v-model="projectNameList"
   size="mini"
   @focus="handleOuterBlur"
   ref="fuzzySearch"
 >

 	handleOuterBlur() {
      		// console.log(this.$refs.fuzzySearch);
        this.$refs.fuzzySearch.$refs.input.blur = () => {
        }
    }

3.使用这个事件即可

@blur.native.capture

上面三种方式我只用过第二种和第三种，但如果都有些问题。

首先说第三种，它确实可以实现点击下拉框空白地方触发事件，但是在你点击下拉框和下拉框空白地方时都会
触发事件，这并不是我想要的效果，当然它可以实现触发事件时方法携带参数（操蛋的是获得的参数是上一次
的参数，并不是当前下拉框选择的值）。

其次说第二种，如果只是<div>中使用<el-Select>时，它可以实现点击下拉框之外的空白地方触发事件，
但是我在<el-dialog>中使用<el-form>,在表单中使用<el-Select>，此时点击下拉框就会报错
“Cannot read property 'blur' of undefined”， 

最后没办法，我想要点击下拉框之外空白地方触发事件，且携带该下拉框的选择的值，只能使用change事件了
绕了一圈，使用了change暂时解决这个问题，但是如果你下拉框的内容可以多选，就难受了。

我把第二种方法实现成功的案例和不成功的案例都发出来，大家看看什么原因，我主要是搞后端的，
前端的控件底层不是很了解，那个报错ai也解释了，如下：

el-select组件并没有input元素。el-select组件主要由一个下拉列表构成，当用户选择一个选项时，
该选项会成为当前选定的值。因此，你不能直接在el-select上使用$refs来引用其内部的input元素。

成功案例：

<template>
  <div>
        <div style="float: left">
          系列：<el-input
            v-model="dataBaseName"
            style="width: 200px;margin-right: 240px;"
            disabled
          ></el-input>
          项目名称:
            <el-select
              v-model="projectNameList"
              :disabled = "disabledProject"
              size="mini"
              multiple
              filterable
              allow-create
              default-first-option
              style="width: 270px"
              @focus="handleOuterBlur"
              ref="fuzzySearch"
            >
              <el-option
                v-for="p in selectedProjectOption"
                :key="p.projectName"
                :label="p.projectName"
                :value="p.projectName"
              >
              </el-option>
            </el-select>
        </div>
  </div>
</template>

  handleOuterBlur() {
      // console.log(this.$refs.fuzzySearch);
        this.$refs.fuzzySearch.$refs.input.blur = () => {
        //里面写你的逻辑
	}

失败案例：
想通过输入的form.product和下拉框选择的form.subEngineerID，查询出form.flowId和form.flowName

<el-dialog
  :title="$t('XrayRejudgeSet.confirm')"
  :close-on-click-modal="false"
  :visible.sync="editDialogPlan"
  width="750px "
>
  <div>
    <el-form :model="form" label-width="100px" ref="form" :rules="rules">
      <el-form-item :label="$t('XrayRejudgeSet.product')" prop="product">
        <el-input
          :disabled="disabled2"
          maxlength="6"
          v-model.number="form.product"
          style="width: 180px"
          clearable
        ></el-input>
        <span style="margin-left: 10px; color: red">
          请输入6码(如:NZCA50)</span
        >
      </el-form-item>
      <el-form-item
        :label="$t('XrayRejudgeSet.subEngineerID')"
        prop="subEngineerID"
      >
        <el-select
          v-model="form.subEngineerID"
          size="mini"
          style="width: 180px"
          filterable
          @change ="handleBlur(form)"
        >
          <el-option
            v-for="p in workStationList"
            :key="p.subEngineerID"
            :label="p.subEngineerID"
            :value="p.subEngineerID"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('XrayRejudgeSet.flowId')" prop="flowId">
        <el-input
          disabled
          v-model.number="form.flowId"
          style="width: 180px"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('XrayRejudgeSet.flowName')" prop="flowName">
        <el-input
          disabled
          v-model.number="form.flowName"
          style="width: 180px"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div style="vertical-align: middle; margin-bottom: 10px">
    <el-button @click="editDialogPlan = false">{{
      $t("commonBtn.cb4")
    }}</el-button>
    <el-button type="primary" @click="formSubmit('form')">{{
      $t("commonBtn.cb3")
    }}</el-button>
  </div>
</el-dialog>

  handleBlur(form) {
	   // console.log(this.$refs.fuzzySearch);
        this.$refs.fuzzySearch.$refs.input.blur = () => {
        //里面写你的逻辑
	}
}

点击下拉框报错了“Cannot read property ‘blur’ of undefined”
解决了给兄弟们发原因