uniapp点击图片表单获取焦点

### 实现点击图片使表单元素获得焦点

在 UniApp 中，为了实现在点击图片后让关联的表单元素获取焦点的功能，可以利用 `ref` 属性来引用组件实例，并通过 JavaScript 调用该实例上的方法。具体来说，在模板中给目标输入框绑定一个唯一的 `ref` 值，当用户点击图像时触发事件处理器函数，在此函数内部访问对应的 DOM 元素并调用其 `.focus()` 方法。

下面是一个完整的示例代码片段展示如何操作：

<template>
  <view class="container">
    <!-- 图片 -->
    <image @click="handleClickImage" src="/static/example.jpg"></image>

    <!-- 表单元素 -->
    <input type="text" v-model="inputValue" ref="customInput"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleClickImage() {
      this.$refs.customInput.focus(); // 让指定的 input 获取焦点[^1]
    }
  }
};
</script>

<style scoped>
/* 添加样式 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个例子中，每当用户点击 `<image>` 标签内的图片时就会执行 `handleClickImage` 函数；而这个函数会找到由 `v-ref="customInput"` 定义好的 `<input>` 输入框并通过调用它的 `focus()` 方法使其自动聚焦。