当前位置：首页 > news >正文

vue2 全局指令（输入框自定义限制）

news 来源：原创 2025/6/8 14:38:55

1.Vue.directive

Vue.directive('precision', {...}): 这是注册一个全局自定义指令的方式，名称为 'precision'。通过这个指令，你可以在模板中的元素上使用 v-precision 来应用该指令。

Vue.directive('precision', { bind(el, binding, vnode) {...} }) 这行代码定义了一个名为 precision 的自定义指令，并在其中使用了钩子函数 bind。在 Vue.js 中，自定义指令是用来直接操作 DOM 的一种方式。

实例

Vue.directive('precision', {bind(el, binding, vnode) {const input = el.querySelector('input');if (input) {input.addEventListener('input', () => {let value = input.value;// 过滤非数字和小数点value = value.replace(/[^0-9.]/g, '');// 处理开头的小数点，替换为0.value = value.replace(/^\./, '0.');// 分割整数和小数部分let parts = value.split('.');// 处理多个小数点的情况，合并小数部分if (parts.length > 2) {value = parts[0] + '.' + parts.slice(1).join('');parts = value.split('.'); // 重新分割确保结构正确}// 截取小数部分至多三位if (parts.length > 1) {parts[1] = parts[1].slice(0, 3);value = parts[0] + '.' + parts[1];}// 避免无效的更新导致光标跳动if (input.value !== value) {input.value = value;}// 触发v-model更新vnode.componentInstance.$emit('input', value);});}}
});使用示例：
<template><div v-precision><input v-model="number" type="text"></div>
</template>