• 限制input 只能输入正整数小数点一位 两位(指令方法)


    1.在directive文件下的directive.js中内容如下 

    // 判断小数点正整数  v-inputLimit='0'  0位  v-inputLimit='1'  1位   v-inputLimit='2'  2位
    const inputLimit = {
      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)
        })
      }
    }
    
    // 自定义指令
    const directives = {
     inputLimit,
    }
    
    
    export default {
     install(Vue) {
       Object.keys(directives).forEach((key) => {
         Vue.directive(key, directives[key])
       })
     },
    }

    2.在mian中引用 

    import directive from './directive/directive'
    // 全局组件挂载 
    Vue.use(directive)

    3.使用

      <el-input class="t-input"
                          :disabled='isCanView'
                          v-inputLimit='0'
                          v-model="formData.performanceWeight"
                          placeholder="请输入"></el-input>
    <el-input class="t-input"
                          :disabled='isCanView'
                          v-inputLimit='1'
                          v-model="formData.performanceWeight"
                          placeholder="请输入"></el-input>
     <el-input class="t-input"
                          :disabled='isCanView'
                          v-inputLimit='2'
                          v-model="formData.performanceWeight"
                          placeholder="请输入"></el-input>
  • 相关阅读:
    Windows10使用VMware安装centos
    Windows10安装VMware
    DotNetCore2.1使用GitLab通过阿里云自动构建镜像上传阿里云仓库在Docker运行
    DotNetCore2.1镜像上传DockerHub在Docker运行
    Linux编辑器
    Linux环境使用Docker安装GitLab
    Linux环境使用Docker安装SqlServer2017
    使用Pycharm创建一个Django项目
    C# 5.0五大新特性
    C#6.0中10大新特性的应用和总结
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/16193557.html
Copyright © 2020-2023  润新知