uni-app中input已获取焦点 用户点击picker后input没有失焦 如何解决

在uni-app中，当你遇到input元素已经获取焦点，而用户点击picker组件后input没有自动失焦的问题，可以通过编程方式手动控制input的失焦。这通常涉及到对picker组件的打开和关闭事件进行监听，并在picker打开时触发input的blur事件。

以下是一个简单的代码示例，展示了如何实现这一功能：

<template>
  <view>
    <!-- Input 元素 -->
    <input
      type="text"
      placeholder="请输入内容"
      @focus="handleInputFocus"
      ref="myInput"
      v-model="inputValue"
    />

    <!-- Picker 组件 -->
    <picker mode="selector" :range="pickerOptions" @change="handlePickerChange" @columnchange="handlePickerColumnChange">
      <view class="picker">
        {{ selectedOption }}
      </view>
    </picker>
    <button @click="showPicker">选择选项</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      pickerOptions: ['选项1', '选项2', '选项3'],
      selectedOption: '请选择',
      isPickerOpen: false,
    };
  },
  methods: {
    handleInputFocus() {
      console.log('Input 获取焦点');
    },
    showPicker() {
      this.$refs.myInput.blur(); // 在打开picker前手动使input失焦
      this.isPickerOpen = true;
      // 模拟picker的显示逻辑（实际使用中可能是通过某个UI库的picker组件方法）
      setTimeout(() => {
        // 模拟picker关闭后逻辑
        this.isPickerOpen = false;
      }, 3000); // 假设3秒后picker关闭
    },
    handlePickerChange(e) {
      this.selectedOption = this.pickerOptions[e.detail.value];
      // 可以在这里添加其他处理逻辑
    },
    handlePickerColumnChange(e) {
      // 处理列变化，如果需要的话
    },
  },
};
</script>

<style>
/* 样式可以根据需要自定义 */
.picker {
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  margin-top: 10px;
}
</style>

在这个示例中，当用户点击“选择选项”按钮时，会先触发showPicker方法，该方法首先调用this.$refs.myInput.blur()使input元素失焦，然后模拟picker的显示状态（实际使用时，picker的显示和关闭可能会通过UI库的API来控制）。这里使用setTimeout模拟了一个3秒后picker关闭的场景，你可以根据实际情况调整或移除这部分代码。

请注意，上述代码是一个简化的示例，实际项目中可能需要更复杂的逻辑来处理picker的显示和隐藏，以及input和picker之间的交互。