vue+elementui 项目中输入手机号，要求必须是数字限制最长11位 。type=“number“ 中maxlength失效

在 Vue.js 和 Element UI 的项目中，如果你想要限制输入框（通常使用 `el-input` 组件）内的手机号只允许输入数字并最多11位，尽管已经设置了 `type="number"` 和 `maxlength="11"` 属性，但在某些情况下这两个特性可能会失效。这可能是由于浏览器的安全策略、用户手动复制粘贴非数字字符，或者是组件内有额外的验证逻辑导致。

解决这个问题，你可以尝试以下几种方法：

1. **自定义验证**:
在 Vue 里，可以利用 `v-model.number` 指令绑定输入值，并使用 `input` 或 `blur` 事件监听器，对输入内容做实时校验，如果超过11位或者包含非数字字符，则清除多余的字符或给出提示。

<template>
  <el-input v-model.number="phoneNumber" :maxlength="11" @input="validatePhoneNumber"></el-input>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
    };
  },
  methods: {
    validatePhoneNumber(e) {
      if (e.target.value.length > 11 || !/^\d+$/.test(e.target.value)) {
        e.target.value = e.target.value.slice(0, 11);
      }
    },
  },
};
</script>

2. **第三方库**:
可以考虑引入第三方库如 `vue-number-mask` 来更方便地控制数字输入和限制长度。

3. **HTML5 input types**:
使用 HTML5 的 `pattern` 属性添加正则表达式，例如 `<input type="tel" pattern="\d{11}" />`，这样虽然浏览器会阻止非数字输入，但是不能限制用户复制粘贴。

记得在实际项目中结合前端和后端验证，确保数据的一致性和安全性。