用vant+vue写一个van-field只能输入28位数字和字母

在Vant和Vue中，你可以使用`van-form`组件以及自定义校验规则来自定义`van-field`的行为，使其仅允许输入28位的数字和字母。首先，你需要安装Vant UI库和Vue CLI：

npm install vant

然后，在你的项目里创建一个新的 Vue 组件，例如 `CustomInput.vue`：

<template>
  <v-row>
    <v-col>
      <van-form ref="form" :model="value">
        <van-field v-model.number="inputValue" :rules="[maxLengthRule]">
          <template slot="prefix">请输入28位字符：</template>
        </van-field>
      </van-form>
    </v-col>
  </v-row>
</template>

<script setup>
import { defineComponent } from 'vue';
import { Form } from 'vant';

const maxLengthRule = (rule, value) => {
  if (value.length > 28 || !/^[a-zA-Z0-9]*$/.test(value)) {
    return [
      { message: '输入长度不能超过28位，只允许数字和字母', type: 'error' },
    ];
  }
};

export default defineComponent({
  components: {
    Form,
  },
  props: {
    inputValue: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const form = Form.create(ref);

    // 检查输入值并更新错误提示
    const handleChange = (e) => {
      if (!maxLengthRule('', e.detail.value)) {
        emit('update:value', e.detail.value);
      }
    };

    form.on('input', handleChange);

    return {
      form,
      inputValue,
    };
  },
});
</script>

在这个组件中，我们使用了Vant的`van-field`，它内置了验证功能。我们定义了一个名为`maxLengthRule`的函数，它检查输入的值是否符合规定。当输入不符合要求时，会触发错误消息。

现在，你可以在其他地方引用这个`CustomInput.vue`组件，并传递初始值：

<template>
  <div>
    <CustomInput v-model="input" @update:value="handleInputChange" />
  </div>
</template>

<script>
import CustomInput from '@/components/Common/CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      input: '',
    };
  },
  methods: {
    handleInputChange(value) {
      // 这里处理输入值的变化...
    },
  },
};
</script>