Vue全局自定义指令-输入指定位数数字

亦凉 2022-04-12 03:59 287阅读 0赞

在vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，除了默认的内置指令，比如v-model、v-show等等，但有时候需求并不限于这些，所以需要开发人员自定义指令。

此文就来实现一个只能输入指定位数数字的自定义指令

在src目录下新建directive文件夹

1.新建module文件夹，然后新建number-only.js

let findEle = (parent, type) => {
      return parent.tagName.toLowerCase() === type
        ? parent
        : parent.querySelector(type);
    };
    
    function filterNum(arg) {
      return arg > 0
        ? new RegExp(`^\\d+(?:\\.\\d{0,${arg}})?$`)
        : new RegExp(`^\\d+$`);
    }
    
    function reducerObj(object) {
        if (typeof object !== 'object') throw Error('param is expected object');
        let data = object;
    
        function split(keyStr) {
          return keyStr.split('.');
        }
    
        function hasOwn(result, key) {
          if (result.hasOwnProperty(key)) {
            return result[key]
          }
          throw Error(key + ' is not exist')
        }
    
        return {
          value: data,
          get(keyStr) {
            let keys = split(keyStr);
            return keys.reduce((result, key, idx, arr) => {
              return hasOwn(result, key);
            }, data)
          },
          set(keyStr, val) {
            let keys = split(keyStr);
            let d = null, preKey;
            let oldVal = keys.reduce((result, key, idx, arr) => {
              d = result;
              preKey = key;
    
              return hasOwn(result, key);
            }, data);
    
            d[preKey] = val;
    
            return {
              val: d[preKey],
              oldVal
            }
          }
        }
      },
    
    export default {
      name: 'numberOnly',
      options: {
        bind: function (el, options, vnode) {
          let $inp = findEle(el, 'input');
          // 默认
          let filter = options.arg;
    
          let reg = filterNum(filterNum);
    
          //可以动态 设置 过滤位数
          Object.defineProperty($inp, 'filterReg', {
            get() {
              return reg;
            },
            set(val) {
              filter = val;
              reg = filterNum(val);
            },
            enumerable: true,
            configurable: true
          });
    
          el.$inp = $inp;
    
          // 读写生成器
          let reducer = reducerObj(vnode.context);
          $inp.handle = function () {
            let numberOnly = this.getAttribute('number-only');
            if (numberOnly > 0 && filter !== numberOnly) this.filterReg = numberOnly;
            if (this.value.length && !this.filterReg.test(this.value)) {
              $inp.value = reducer.get(options.expression);
            } else {
              reducer.set(options.expression, this.value);
            }
            return false;
          };
    
          $inp.addEventListener('input', $inp.handle);
        },
        // update(...ddd) {
        //   console.log(ddd);
        // },
        unbind: function (el) {
          el.$inp.removeEventListener('input', el.$inp.handle);
        }
      }
    };

2.在module同级目录新建directives.js

import numberOnly from './module/numberonly'
    
    const importDirective = Vue => {
      Vue.directive(NumberOnly.name, NumberOnly.options);
    }
    
    export default importDirective

3.main.js

import importDirective from './directive'
    importDirective (Vue)

4.使用

<input :value="value" v-number-only:0="value"/>表示只能输入整数

<input :value="value" v-number-only:2="value"/>表示可以最多可以输入两位小数

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue---内置指令、自定义指令（详细）、全局指令与局部指令

目录一、v-on 二、v-bind、v-model 三、v-if、v-else、v-show、v-for 四、v-text、v-big 五、v-html 六、v-

一时失言乱红尘/ 2024年04月07日 12:56/ 0 赞/ 90 阅读

相关 Vue + TS 封装全局自定义指令

在 Vue 中，指令是一种特殊的语法，用于在 DOM 元素上添加特定的行为。Vue 提供了许多内置指令，如 `v-if`、`v-for`、`v-bind` 等，但是在实际开发中

不念不忘少年蓝@/ 2023年10月13日 10:11/ 0 赞/ 18 阅读

相关 Vue入门指南——自定义全局指令和局部指令

目录：一、简介二、如何自定义指令 1.自定义全局指令 2.自定义局部指令

分手后的思念是犯贱/ 2023年07月01日 03:28/ 0 赞/ 3 阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 236 阅读

相关 vue 指令自定义

<body> <div id="app"> <input type="text" v-focus> <input type=

╰半橙微兮°/ 2023年01月07日 08:51/ 0 赞/ 291 阅读

相关 vue全局自定义指令

一、用一个页面放自定义方法 clickStateForm.js / @description 自定义指令v-preventClick 防止重复点击

绝地灬酷狼/ 2022年09月08日 04:55/ 0 赞/ 263 阅读

相关 Vue全局自定义指令-输入指定位数数字

在vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，除了默认的内置指令，比如v-model、v-show等等，但有时候需

亦凉/ 2022年04月12日 03:59/ 0 赞/ 288 阅读

相关 Vue-自定义全局指令和局部指令的方法详解

自定义全局指令语法： `Vue.directive ('Directive_Name',{Hook_Function:callback(el,b

亦凉/ 2021年12月01日 15:12/ 0 赞/ 538 阅读

相关 vue自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面

布满荆棘的人生/ 2021年09月02日 06:07/ 0 赞/ 537 阅读

相关 vue 自定义指令

自定义指令: 1、全局指令: (1)创建 Vue.directive('名称',{ 钩子函数:function(el,

曾经终败给现在/ 2021年07月24日 18:28/ 0 赞/ 652 阅读