element el-input 只能输入数字,限制最大最小,小数位数 --使用 directive

效果图:

条件:  限制最大 100,最小0,最长两位小数

输入大于100,自动变为100.

超出,2位小数,自动四舍五入

 

以下是使用全局指令的案例

(也可以使用局部指令,可以参考文档 https://cn.vuejs.org/v2/guide/custom-directive.html):

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>

参考文档:

vue官方API:  https://cn.vuejs.org/v2/guide/custom-directive.html

MDN Web文档:  https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener