vue3 校验el-input只能输入(包含)1-24之间的正整数

你可以使用 Vue.js 提供的内置校验规则 `Vue.directive('validate', {})` 来实现校验 `el-input` 中的内容是否为 1-24 之间的正整数。

首先，在组件的 `template` 中，你需要使用 `v-model` 指令绑定一个 `data` 中的变量。

<el-input v-model="inputValue"></el-input>

然后，在组件的 `script` 中，你可以通过 `Vue.directive('validate', {})` 定义一个名为 `validate` 的校验规则。

Vue.directive('validate', {
  bind: function(el, binding, vnode) {
    el.addEventListener('input', function() {
      let value = el.value
      if (value === '') {
        vnode.componentInstance.$emit('input', '')
      } else {
        value = parseInt(value)
        if (value >= 1 && value <= 24) {
          vnode.componentInstance.$emit('input', value)
        } else {
          vnode.componentInstance.$emit('input', '')
        }
      }
    })
  }
})

在上面的代码中，我们绑定了一个 `input` 事件，用来监听用户输入的内容。当用户输入内容时，我们首先判断输入框中是否为空。如果为空，则直接将 `v-model` 绑定的变量设为 `''`。如果不为空，则将输入框中的值转换为数值类型，并判断是否为 1-24 之间的正整数。如果是，则将 `v-model` 绑定的变量设为该数值；如果不是，则将 `v-model` 绑定的变量设为 `''`。

最后，在 `el-input` 中使用 `v-validate` 指令来启用校验规则。

<el-input v-model="inputValue" v-validate></el-input>

这样，当用户输入的内容不符合校验规则时，输入框中的内容就会被清空。