vue项目 - 自定义数字输入指令 | 限制自定义小数位输入
2024-10-20 16:37:21
1、在main.js中直接加入代码：
import Vue from 'vue'
Vue.directive("input-limit", {
bind(el, binding) {
var wins_0 = /[^\d]/g //整数判断
var wins_1 = /[^\d^\.]/g //小数判断
var flag = true;
var points = 0;
var lengths = 0
var remainder = 0
var no_int = 0
const target = el instanceof HTMLInputElement ? el : el.querySelector("input");
target.addEventListener("compositionstart", e => {
flag = false;
});
target.addEventListener("compositionend", e => {
flag = true;
});
target.addEventListener("input", e => {
setTimeout(function() {
if (flag) {
if (binding.value == 0) {
if (wins_0.test(e.target.value)) {
e.target.value = e.target.value.replace(wins_0, "");
e.target.dispatchEvent(new Event("input")) //手动更新v-model值
}
}
if (binding.value == 1) {
if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
remainder = true
}
if ((e.target.value.split('.')).length - 1 > 1) {
points = true
}
if (e.target.value.toString().split(".")[1] != undefined) {
if (e.target.value.toString().split(".")[1].length > 1) {
lengths = true
}
}
if (e.target.value.toString().indexOf(".") != -1) {
no_int = false
} else {
no_int = true
}
if (wins_1.test(e.target.value) || lengths || points || remainder) {
if (!no_int) {
e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
'$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
".") + 2)
} else {
e.target.value = e.target.value.replace(wins_0, "")
}
e.target.dispatchEvent(new Event("input"))
}
}
if (binding.value == 2) {
if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
remainder = true
}
if ((e.target.value.split('.')).length - 1 > 1) {
points = true
}
if (e.target.value.toString().split(".")[1] != undefined) {
if (e.target.value.toString().split(".")[1].length > 2) {
lengths = true
}
}
if (e.target.value.toString().indexOf(".") != -1) {
no_int = false
} else {
no_int = true
}
if (wins_1.test(e.target.value) || lengths || points || remainder) {
if (!no_int) {
e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
'$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
".") + 3)
} else {
e.target.value = e.target.value.replace(wins_0, "")
}
e.target.dispatchEvent(new Event("input"))
}
}
}
}, 0)
})
}
})
2、然后就可以直接使用了：
// v-input-limit='number'
// eg: v-input-limit='2' 代表可以输入2位小数的数字
<el-input v-input-limit='2' v-model="amountVal" placeholder="请输入金额"></el-input>
转载：https://blog.csdn.net/weixin_43839317/article/details/110486021
最新文章
- 使用etree.HTML的编码问题
- PHP文件大小格式化函数合集
- node.js 基础学习笔记3 -express
- Unity加载模块深度解析（Shader）
- swift开发多线程篇 - 多线程基础
- simple-LDAP-auth
- Andoird自定义ViewGroup实现竖向引导界面
- COJ0702 数学（三）
- 一种少见的跨目录写webshell方法
- 利用Web服务器网络打洞
- base64和图片的互转（HTML5的File实现)
- C++模板实例掌握
- HDU 5679 Substring 后缀数组判重
- 推荐系统架构-(附ppt&代码）
- 【安富莱专题教程第3期】开发板搭建Web服务器，利用花生壳让电脑和手机可以外网远程监控
- Concurrent下的线程安全集合
- JavaScript和Ajax部分（2）
- centos 6 与 centos 7 服务开机启动、关闭设置的方法
- linux 下的常用操作命令
- 在OneNote中快速插入当前日期和时间