改变事件执行顺序

直接点击提交执行submitFn,点击输入框后再点击提交等待onBlur执行完后执行提交#

不要忘记finally置空#

<template>
  <el-input @blur="onBlur" v-model="input" placeholder="Please input" style="width:200px" />
  <el-button @click="submitFn" type="primary">提交</el-button>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
export default {
  setup () {
    const input = ref('')
    let inputLoading = null

    const onBlur = () => {
      inputLoading = new Promise(resolve => {
        console.log('onBlurStart')
        setTimeout(() => {
          console.log('onBlurEnd')
          resolve()
        }, 2000)
        //不要忘记finally置空
      }).finally(() => {
        inputLoading = null
      })

    }
    const submitFn = () => {
      if (inputLoading) {
        inputLoading.then(() => {
          console.log('submit', 22)
        })
      } else {
        console.log('submit', 11)
      }
    }
    return { input, onBlur, submitFn }
  }
}
</script>

<style>
</style>