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

逃离我推掉我的手 2022-04-24 12:58 2195阅读 0赞

> **效果图:**
> 
> 条件:  限制最大 100,最小0,最长两位小数
> 
> 输入大于100,自动变为100.
> 
> 超出,2位小数,自动四舍五入
> 
>  
> 
> ![20190425111939674.gif][]

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

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

**1.文件结构:**

**     文件夹结构, src 下新建一个 directive 文件夹**

**     directive 文件夹下又新建一个 el-input 文件夹**

**     el-input 文件夹下,新建 index.js 和 onlyNumber.js 文件**

![20190425112227488.png][]

**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][https_cn.vuejs.org_v2_guide_custom-directive.html]

MDN Web文档:  [https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener][https_developer.mozilla.org_zh-CN_docs_Web_API_EventTarget_addEventListener]

[20190425111939674.gif]: /images/20220215/eb60898058d14ed0a63682d3185b2725.png
[https_cn.vuejs.org_v2_guide_custom-directive.html]: https://cn.vuejs.org/v2/guide/custom-directive.html
[20190425112227488.png]: /images/20220215/d445fb534fdb4bb2b08673b0e9088c29.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_EventTarget_addEventListener]: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener