vue input超过字符限制时不允许输入

在Vue.js中，当需要限制`input`元素的字符数并阻止用户超出该限制继续输入时，可以利用Vue的响应式特性结合自定义事件和DOM操作来实现。下面是一个简单的例子：

1. 首先，在模板(`template`)部分创建`input`字段，并设置一个v-model绑定，这会监听输入的变化：

<template>
  <input type="text" v-model="inputValue" @input="handleInput">
</template>

2. 然后在`script`部分编写`handleInput`方法，这个方法会在用户每次键入后触发：

<script>
export default {
  data() {
    return {
      inputValue: '',
      maxLength: 10, // 设置最大字符长度
    };
  },
  methods: {
    handleInput(e) {
      if (e.target.value.length > this.maxLength) {
        e.target.value = e.target.value.slice(0, this.maxLength); // 截断超出的部分
        this.$emit('input-limit-reached'); // 触发自定义事件通知父组件
      }
    },
  },
};
</script>

3. 当你在父组件接收到`input-limit-reached`事件时，可以根据需求做进一步处理，例如显示提示信息或禁用输入框：

<!-- 父组件模板 -->
<div>
  <input :value="inputValue" @input-limit-reached="disableInputIfFull">
  <p v-if="isInputDisabled">输入已满，无法继续输入。</p>
</div>

<script>
// 父组件
methods: {
  disableInputIfFull() {
    this.isInputDisabled = true;
  },
  resetInput() {
    this.inputValue = '';
    this.isInputDisabled = false;
  }, // 如果有需求，也可以提供重置输入的功能
},
</script>