vue3自定义指令实现输入框值范围大小限制

// 自定义指令代码
export default (vue: any) => {
  const handler = ($event: Event) => {
    const inputEl = $event.target as HTMLInputElement;
    let maxValue = inputEl.max ? parseFloat(inputEl.max) : 0;
    let minValue = inputEl.min ? parseFloat(inputEl.min) : 0;
    let value = parseFloat(inputEl.value);
    if (isNaN(value)) {
      inputEl.value = "";
    } else if (value > maxValue) {
      inputEl.value = maxValue.toString();
    } else if (value < minValue) {
      inputEl.value = minValue.toString();
    } else {
      inputEl.value = value.toString();
    }
  };

  vue.directive("limit", {
    mounted(el, binding, vnode) {
      let child = el.children[0].children[0] as HTMLInputElement; // 获取到 Input 元素
      child.addEventListener("input", handler); // 添加监听
    },
    unmounted(el, binding, vnode) {
      let child = el.children[0].children[0] as HTMLInputElement; // 获取到 Input 元素
      child.removeEventListener("input", handler); // 移除监听
    }
  });
};

main.ts中引入

import limitPlugins from "./utils/limitPlugins";
const app = createApp(App);
app.use(limitPlugins);

组件上使用，这里用的是element-plus里面的el-input组件，在其他ui库使用，需更改自定义指令里面的代码，找到input输入框就行了

<el-input
	v-model="formData!.qualityOfService"
	v-limit
	min="0"
	max="10"
	type="number"
	placeholder="请输入服务质量"
/>