Vant Input组件：如何仅在输入框聚焦时显示字数限制？

要在Vant的Input组件中实现仅在输入框聚焦时显示字数限制，你可以使用Vant的Field组件（Input组件的封装）并结合focus和blur事件来控制字数限制的显示。

以下是一个示例代码：

<template>
  <div>
    <van-field
      v-model="inputValue"
      :maxlength="maxLength"
      :placeholder="请输入内容"
      @focus="showLimit = true"
      @blur="showLimit = false"
    />
    <span v-if="showLimit" class="limit-text">
      {{ inputValue.length }} / {{ maxLength }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      maxLength: 20, // 设置最大字数限制
      showLimit: false, // 控制是否显示字数限制
    };
  },
};
</script>

<style scoped>
.limit-text {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}
</style>

代码说明：

1. van-field组件：这是Vant提供的输入框组件，v-model用于双向绑定输入框的值，maxlength用于设置最大输入长度。
2. @focus和@blur事件：分别在输入框聚焦和失焦时触发，用于控制showLimit的值。
3. showLimit：这是一个布尔值，用于控制是否显示字数限制。
4. limit-text：这是一个简单的样式类，用于设置字数限制文本的样式。

实现效果：

• 当输入框聚焦时，显示当前输入的字数和最大字数限制。
• 当输入框失焦时，隐藏字数限制。

通过这种方式，你可以实现仅在输入框聚焦时显示字数限制的效果。