效果图:
条件: 限制最大 100,最小0,最长两位小数
输入大于100,自动变为100.
超出,2位小数,自动四舍五入
以下是使用全局指令的案例
1.文件结构:
文件夹结构, src 下新建一个 directive 文件夹
directive 文件夹下又新建一个 el-input 文件夹
el-input 文件夹下,新建 index.js 和 onlyNumber.js 文件
2.文件代码
onlyNumber.js 核心实现
export default {
inserted(el,vDir, vNode) {
// vDir.value 有指令的参数
let content;
//按键按下=>只允许输入 数字/小数点
el.addEventListener("keypress", event => {
let e = event || window.event;
let inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode);
let re = /\d|\./;
content = e.target.value;
//定义方法,阻止输入
function preventInput(){
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
if (!re.test(inputKey) && !e.ctrlKey) {
preventInput();
} else if (content.indexOf(".") > 0 && inputKey == ".") {
//已有小数点,再次输入小数点
preventInput();
}
});
//按键弹起=>并限制最大最小
el.addEventListener("keyup",event => {
let e = event || window.event;
content = parseFloat(e.target.value);
if (!content) {
content = 0.00;
}
let arg_max = "";
let arg_min = "";
if (vDir.value) {
arg_max = parseFloat(vDir.value.max);
arg_min = parseFloat(vDir.value.min);
}
if(arg_max && content > arg_max){
e.target.value = arg_max;
content = arg_max;
}
if(arg_min && content < arg_min){
e.target.value = arg_min;
content = arg_min;
}
});
//失去焦点=>保留指定位小数
el.addEventListener("focusout",event=>{//此处会在 el-input 的 @change 后执行
let e = event || window.event;
content = parseFloat(e.target.value);
if (!content) {
content = 0.00;
}
let arg_precision = 0;//默认保留至整数
if (vDir.value.precision) {
arg_precision = parseFloat(vDir.value.precision);
}
e.target.value = content.toFixed(arg_precision);
// -- callback写法1
// vNode.data.model.callback = ()=>{
// e.target.value = content.toFixed(arg_precision)
// }
// vNode.data.model.callback();
// -- callback 写法2
// vNode.data.model.callback(
// e.target.value = content.toFixed(arg_precision)
// )
})
}
}
index.js 提供安装方法
import onlyNumber from './onlyNumber'
const install = Vue => {
Vue.directive('onlyNumber', onlyNumber)
}
/*
Vue.use( plugin )
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
*/
if (window.Vue) {
window['onlyNumber'] = onlyNumber
Vue.use(install); // eslint-disable-line
}
onlyNumber.install = install
export default onlyNumber
main.js 在入口 js 中添加两行,其他不要添加
import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import onlyNumber from '@/directive/el-input'; //添加此行=>自定义全局指令
Vue.use(ElementUI)
Vue.use(api)
Vue.use(onlyNumber); //添加此行=>使用该全局指令
Vue.prototype.global = global
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
指令调用:
不用 import 导入直接使用, v-only-number="{max:100,min:0,precision:2}"
<el-input v-model="inputVal" v-only-number="{max:100,min:0,precision:2}" size="mini"
placeholder="请输入受益比例">
<template slot="append">%</template>
</el-input>
