移动端输入框的失焦事件和按钮事件冲突

在pc端不会出现，但是在移动端在输入框输入后直接点击下一步按钮，输入框的失焦事件就会出问题
原因出在，在移动端，当输入框获取焦点后，点击按钮不会触发输入框的失焦事件，这是因为移动设备上的软键盘和按钮点击事件会有冲突，为了解决这个问题，可以尝试以下几种做法

1.监听按钮的点击事件
在按钮的点击事件处理函数中，手动让输入框失去焦点，可以通过获取输入框的DOM元素，并调用blur()方法来实现

methods: {
  handleClickButton() {
    const inputElement = document.getElementById('your-input-id');
    inputElement.blur();
    // 执行其他操作
  }
}
这种方法适用于你能够直接访问输入框 DOM 元素的情况。

2.使用@click 指令替代v-on:click，在按钮上使用@click，并在点击事件处理函数中使用setTimeout延迟执行失焦操作，这样可以确保按钮点击事件能够先执行，再执行失焦操作

<template>
  <button @click="handleClickButton">按钮</button>
  <input type="text" @blur="handleBlurInput" />
</template>

<script>
export default {
  methods: {
    handleClickButton() {
      setTimeout(() => {
        // 执行失焦操作
        // 处理其他操作
      }, 100);
    },
    handleBlurInput() {
      // 输入框失焦事件处理
    }
  }
}
</script>
使用 `setTimeout` 延迟执行可以确保按钮的点击事件先于失焦事件执行。

3.移动设备上的按钮点击使用v-on:rouchend事件代替v-on:click,因为touched事件在移动设备上触发时，输入框已经失去了焦点

<template>
  <button @touchend="handleClickButton">按钮</button>
  <input type="text" @blur="handleBlurInput" />
</template>

<script>
export default {
  methods: {
    handleClickButton() {
      // 执行按钮点击事件
      // 处理其他操作
    },
    handleBlurInput() {
      // 输入框失焦事件处理
    }
  }
}
</script>
使用 `v-on:touchend` 可以避免按钮点击和输入框失焦事件之间的冲突。