vant-field 输入框怎样做到聚焦后才展示字数限制

在前端开发中，对于用户输入的交互设计至关重要。vant-field 输入框是一个常用的组件，有时候我们希望输入框聚焦后才展示字数限制，这样能提升用户体验，避免页面信息过于繁杂。那么，如何实现这一功能呢？

我们要明确基本思路。利用 vant-field 自身的事件机制，监听输入框的聚焦和失焦事件，通过控制 CSS 样式来决定字数限制提示信息的显示与隐藏。

在 HTML 部分，我们创建一个简单的 vant-field 输入框结构。例如：

<van-field
  v-model="inputValue"
  label="请输入内容"
  :maxlength="maxLength"
  @focus="onFocus"
  @blur="onBlur"
></van-field>
<span v-if="showLimit" class="limit-tip">剩余{{maxLength - inputValue.length}} 字</span>

这里我们绑定了 v-model 用于数据双向绑定，maxlength 设定了输入的最大字数，同时绑定了 focus 和 blur 事件，分别对应聚焦和失焦。而 v-if 指令用于控制字数限制提示信息的显示。

接下来是 JavaScript 部分，在组件的 data 中定义需要的变量：

data() {
  return {
    inputValue: '',
    maxLength: 100,
    showLimit: false
  };
},

然后编写 focus 和 blur 事件的处理函数：

methods: {
  onFocus() {
    this.showLimit = true;
  },
  onBlur() {
    this.showLimit = false;
  }
}

当输入框聚焦时，onFocus 函数被触发，将 showLimit 设置为 true，这样通过 v-if 指令控制的字数限制提示信息就会显示出来。当输入框失焦时，onBlur 函数执行，把 showLimit 设置为 false，提示信息隐藏。

最后是 CSS 样式部分，为了让提示信息显示得美观，我们可以添加一些样式：

.limit-tip {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

通过以上步骤，我们就成功实现了 vant-field 输入框聚焦后才展示字数限制的功能。这种交互设计能让用户在需要时才看到字数限制提示，使输入过程更加流畅，优化了用户体验，同时也提升了页面的整体美观度。在实际项目中，可根据具体需求进一步调整和扩展该功能。