使用 vant-fiedl 输入框实现聚焦后才展示字数限制
在使用 vant-fiedl 输入框时，有时希望只有在输入框获得焦点后才展示字数限制。可以通过以下方式实现：
代码:
import { computed } from 'vue'
import { field } from 'vant'
export default {
components: {
[field.name]: field
},
data() {
return {
value: '',
focused: false
}
},
computed: {
showcount() {
return this.focused
}
}
}使用:
原理:
- 通过 v-model 双向绑定 value 数据。
- focused 变量用于控制输入框的聚焦状态。
- showcount 计算属性返回 focused 的值，即只有输入框获得焦点时才显示字数限制。
- @focus 和 @blur 事件监听器分别在输入框聚焦和失焦时更新 focused 变量。
