免费空间网_英语作文网站_海外销售平台有哪些_西安网站关键词推广

// 自定义指令代码
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-inputv-model="formData!.qualityOfService"v-limitmin="0"max="10"type="number"placeholder="请输入服务质量"
/>