使用 vant-fiedl 输入框实现聚焦后才展示字数限制

在使用 vant-fiedl 输入框时，有时希望只有在输入框获得焦点后才展示字数限制。可以通过以下方式实现：

代码:

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

import { computed } from 'vue'
import { field } from 'vant'

export default {
  components: {
    [field.name]: field
  },
  data() {
    return {
      value: '',
      focused: false
    }
  },
  computed: {
    showcount() {
      return this.focused
    }
  }
}

使用:

<template><field v-model="value" true false :show-count="showCount"></field></template>

原理:

• 通过 v-model 双向绑定 value 数据。
• focused 变量用于控制输入框的聚焦状态。
• showcount 计算属性返回 focused 的值，即只有输入框获得焦点时才显示字数限制。
• @focus 和 @blur 事件监听器分别在输入框聚焦和失焦时更新 focused 变量。