【前端之日常工作】常使用的自定义指令集合

最新推荐文章于 2024-04-10 11:15:09 发布
最新推荐文章于 2024-04-10 11:15:09 发布
阅读量361 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ercyao/article/details/105842384
版权

>指令有：只能输入正整数指令、 只能输入数字和两位小数点指令、按钮权限指令、触摸事件指令、全局loading指令


```
/* 
 ** 自定义指令
 */

import Vue from 'vue'
import * as storage from '@/utils/storage'

/*==================|-- * 只能输入正整数指令 * start --|==================*/
// 使用方法： v-enter-number
Vue.directive('enterNumber', {
  inserted: function (el) {
    el.addEventListener("keypress", function (e) {
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    });

    let legalContent, //开启输入法之前的输入内容
      LOCK = false; //是否开启中文输入法
    el.addEventListener('compositionstart', (e) => {
      legalContent = e.target.value; //保存中文输入法之前的内容
      LOCK = true; //加上锁
    }, false);

    el.addEventListener('compositionend', (e) => {
      e.target.value = legalContent;
      LOCK = false; // 解锁
    }, false);

    el.addEventListener('input', (e) => {
      if (!LOCK) {
        e.target.value = e.target.value.replace(/\D/, '');
      }
    }, false);
  },
  update: function (el) {
    el.addEventListener('paste', (e) => {
      e.preventDefault();
    }, false);
  }
});
/*==================|-- * 只能输入正整数指令 * end --|==================*/


/*==================|-- * 只能输入正数(包含小数)指令 * start --|==================*/
// 使用方法： v-enter-number-point
Vue.directive('enterNumberPoint', {
  inserted: function (el) {
    // 用来处理中文输入法的情况  start
    let input = el.getElementsByTagName("input")[0]  //因为是用的el-input，所以这么拿到input
    input.setAttribute("type", "number"); //设置类型是number，解决输入中文的问题，尝试过很多种方法，但最终发现，只有设置为number可以解决
    input.setAttribute("step", "0.01"); //解决输入不了，如1.1这种的数据
    // 用来处理中文输入法的情况  end


    let isSelect = false
    el.addEventListener("keypress", function (e) {  //在控件有焦点的情况下按下键时发生
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if (charcode == 46) {
        if (e.target.value && e.target.value.includes('.')) {
          e.preventDefault();
        }
      } else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      } else {
        if (!isSelect) {  //处于截断时候的bug
          if (e.target.value && e.target.value.includes('.')) { //如果输入小数的时候
            let len = e.target.value.toString().split(".")[1].length;
            if (len === 2 || e.key === '.') {
              e.preventDefault();
            }
          }
        }
      }
    });

    //失去焦点=>保留指定位小数
    el.addEventListener("keyup", e => {
      isSelect = false
      // console.log('keyup', e, e.target.value)
    }, false)

    //选中
    el.addEventListener("select", e => {
      isSelect = true
      // console.log('select', e, e.target.value)
    }, false)

    //点击
    el.addEventListener("click", e => {
      isSelect = false
      // console.log('click', e, e.target.value)
    }, false)

    //失去焦点
    el.addEventListener("focusout", e => {
      isSelect = true
      // console.log('focusout', e, e.target.value)
    }, false)

    let legalContent, //开启输入法之前的输入内容
      LOCK = false; //是否开启中文输入法
    el.addEventListener('compositionstart', (e) => {
      legalContent = e.target.value; //保存中文输入法之前的内容
      LOCK = true; //加上锁
      isSelect = true
    }, false);

    el.addEventListener('compositionend', (e) => {
      e.target.value = legalContent;
      LOCK = false; // 解锁
      isSelect = true
    }, false);

    el.addEventListener('input', (e) => {
      if (LOCK) return 0;
      if (!LOCK) {
        setInputVal(e)
      } else {
      }
    }, false);

    function setInputVal (e) {
      let dataLen = e.data ? e.data.length : 1
      let len = e.key ? 1 : dataLen
      if (e.target.value && e.target.value.includes('.')) { //如果输入小数的时候
        if (!/^([1-9]+\d*|0{1})\.\d{0,2}$/.test(e.target.value)) {
          e.target.value = e.target.value.slice(0, e.target.value.length - len)
        }
      } else {     //如果输入整数的时候
        if (!/^([1-9]+\d*|0{1})$/.test(e.target.value)) {
          e.target.value = e.target.value.slice(0, e.target.value.length - len)
        }
      }
    }
  },
  update: function (el) {
    el.addEventListener('paste', (e) => {
      console.log('paste')
      e.preventDefault();  //禁止复制，防止不知道复制到是什么东西
    }, false);
  }
});
/*==================|-- * 只能输入正数(包含小数)指令 * end --|==================*/


/*==================|-- * 后台管理按钮权限指令 * start --|==================*/
// 使用方法： v-has="`/table/Table_Update`"
Vue.directive('has', {
  bind: function (el, binding) {
    if (!binding.value) {
      return el.style.display = 'none';
    }
    if (!Vue.prototype.$_has(binding.value)) {
      el.style.display = 'none';
    }
  }
});
//权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
  let perms = storage.get('perms') || []
  if (perms === undefined || perms === null || !perms) {
    return false;
  }

  for (let item of perms) {
    if (item && item.indexOf(value) > -1) {
      isExist = true;
      break;
    }
  }
  // console.log('权限', perms)
  return isExist;
};
/*==================|-- * 权限指令 * end --|==================*/

```

###监听触摸事件
```
import vue from 'vue'

/************* 事例 start **************
 <div class="box" 
     v-tap="(e)=>vueTouch('点击',e)" 
     v-longtap="(e)=>vueTouch('长按',e)" 
     v-swipeleft="(e)=>vueTouch('左滑',e)"
     v-swiperight="(e)=>vueTouch('右滑',e)"
     v-swipeup="(e)=>vueTouch('上滑',e)"
     v-swipedown="(e)=>vueTouch('下滑',e)"
  >{{ name }}</div>
************* 事例 end **************/

function vueTouch(el, binding, type) {
  var _this = this;
  this.obj = el;
  this.binding = binding;
  this.touchType = type;
  this.vueTouches = {
    x: 0,
    y: 0
  };
  this.vueMoves = true;
  this.vueLeave = true;
  this.longTouch = true;
  this.vueCallBack = typeof (binding.value) == "object" ? binding.value.fn : binding.value;
  this.obj.addEventListener("touchstart", function (e) {
    _this.start(e);
  }, false);
  this.obj.addEventListener("touchend", function (e) {
    _this.end(e);
  }, false);
  this.obj.addEventListener("touchmove", function (e) {
    _this.move(e);
  }, false);
};
vueTouch.prototype = {
  start: function (e) {
    this.vueMoves = true;
    this.vueLeave = true;
    this.longTouch = true;
    this.vueTouches = {
      x: e.changedTouches[0].pageX,
      y: e.changedTouches[0].pageY
    };
    this.time = setTimeout(function () {
      if (this.vueLeave && this.vueMoves) {
        this.touchType == "longtap" && this.vueCallBack(this.binding.value, e);
        this.longTouch = false;
      };
    }.bind(this), 500);
  },
  end: function (e) {
    var disX = e.changedTouches[0].pageX - this.vueTouches.x;
    var disY = e.changedTouches[0].pageY - this.vueTouches.y;
    clearTimeout(this.time);
    if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {
      this.touchType == "swipe" && this.vueCallBack(this.binding.value, e);
      if (Math.abs(disX) > Math.abs(disY)) {
        if (disX > 10) {
          this.touchType == "swiperight" && this.vueCallBack(this.binding.value, e);
        };
        if (disX < -10) {
          this.touchType == "swipeleft" && this.vueCallBack(this.binding.value, e);
        };
      } else {
        if (disY > 10) {
          this.touchType == "swipedown" && this.vueCallBack(this.binding.value, e);
        };
        if (disY < -10) {
          this.touchType == "swipeup" && this.vueCallBack(this.binding.value, e);
        };
      };
    } else {
      if (this.longTouch && this.vueMoves) {
        this.touchType == "tap" && this.vueCallBack(this.binding.value, e);
        this.vueLeave = false
      };
    };
  },
  move: function (e) {
    this.vueMoves = false;
  }
};
vue.directive("tap", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "tap");
  }
});
vue.directive("swipe", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "swipe");
  }
});
vue.directive("swipeleft", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "swipeleft");
  }
});
vue.directive("swiperight", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "swiperight");
  }
});
vue.directive("swipedown", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "swipedown");
  }
});
vue.directive("swipeup", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "swipeup");
  }
});
vue.directive("longtap", {
  bind: function (el, binding) {
    new vueTouch(el, binding, "longtap");
  }
});

// 自动聚焦
vue.directive("focus", {
  inserted: function (el, value) {
    if (value) {
      console.log('自动聚焦')
      el.focus();
    }
  }
});
```

###全局loading
```
///loading.less
@keyframes custom-loading-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.custom-loading {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.custom-loading .custom-loading-round {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #f9c653;
  border-left-color: transparent;
  animation: custom-loading-rotate 1s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
```
```
import vue from 'vue'
import '@/assets/loading.less'

//使用方法： v-loading="isShowLoding"

vue.directive('loading', {
  bind: (el, binding) => {
    const tempDiv = document.createElement('div')
    tempDiv.className = 'custom-loading'
    const round = document.createElement('div')
    round.className = 'custom-loading-round'
    tempDiv.appendChild(round)
    el.loadingElement = tempDiv
    const curStyle = window.getComputedStyle(el)
    const position = curStyle.position
    if (position === 'absolute' || position === 'relative') {
      el.style.position = position
    } else {
      el.style.position = 'relative'
    }
    if (binding.value) {
      el.appendChild(tempDiv)
    }
  },
  update: (el, binding) => {
    if (binding.value) {
      if (el.loadingElement.parentNode === null) {
        el.appendChild(el.loadingElement)
      }
    } else {
      if (el === el.loadingElement.parentNode) {
        el.removeChild(el.loadingElement)
      }
    }
  },
  unbind: (el) => {
    if (el.loadingElement.parentNode === el) {
      el.removeChild(el.loadingElement)
    }
    el.loadingElement = null
  }
})
```
 

北极星丶超帅的
关注
专栏目录
Vue自定义指令实现按钮级别权限
qq_43374132的博客
09-02 1036
Vue自定义指令实现按钮级别权限
一线大厂常用的六大vue自定义指令合集之权限校验v-permission
lixiaosenlin的专栏
10-08 3149
前言 大家好，截至目前大厂中常用的六大vue自定义指令我们已经搞了四个了，今天就 来继续搞六大常用指令中的第五个指令 - 权限校验之v-permission。 在我们日常开发中权限校验是必不可少的一个环节，尤其是对于一些应用系统或一些中后台的开发，更是需要用到权限校验的。那么权限校验也有很多种类，比如菜单权限、组件权限甚至是小到元素权限等等，本文我们就将以元素权限为例，实现一个简单的权限校验自定义指令。 在有一些场景中我们可能会根据用户登录后所拥有的权限来决定哪些元素该显示，哪些元素不该显示。比如我们最常
vue项目中常用的自定义指令
04-12
指令包含复制、指定显示行数、外部点击、防抖节流、element dialog改变大小，拖拽、只可以输入数字、长点击、权限、水印等
Web前端开发进阶笔记7——自定义指令
DRLDER的博客
05-31 592
1.自定义指令的入门： 这里我们需要注意的是：指令中focus是自定义命令名，而自定义指令
辉太郎看前端(自定义指令)
辉太郎的博客
01-08 171
前言 vue中有系统提供的指令，也可以自定义指令，当我们需要操作低层元素时，可以自定义指令。 自定义指令在定义时，不用加v-，使用时要加v-。 自定义指令分两种，全局自定义指令和局部自定义指令。 自定义指令 全局自定义指令 全局自定义指令我们可以定义在main.js中，其使用的语法为Vue.directive(‘指令名’， function(){需要的指令钩子函数}) 局部自定义指令 定义在组件中的export default{}中 语法：directives:{指令名：{需
前端学习（1566）：自定义指令
歌谣的博客
06-27 207
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body ng-app="myApp1...
前端学习（1212）:自定义指令
歌谣的博客
05-21 231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
Vue的v-for遍历中的自定义指令无效
第一行代码
06-20 3175
问题发现 在v-for循环中，通过自定义指令获取循环中每一项的值，然后进行处理，第一次进行v-for遍历，可以正常获取值，并渲染页面，但是list被重新赋值，第二次v-for遍历的时候，在页面中可以直接获取值，但是在指令中无法获取最新的值，只能获取比第一次遍历的List多的几个元素的值 原因分析 代码： <div v-for="item,index in list" :key="index"> <td >{{item.id}}</td>
Vue自定义指令与插件开发
## 1.1 什么是Vue自定义指令与插件开发 在Vue.js中，自定义指令与插件开发是一种扩展Vue功能和增加Vue组件行为的方式。自定义指令可以用于操作DOM元素，为其添加特定功能或响应特定事件。而插件则是一组功能的集合...
ElementUI2.0下拉框组件实现虚拟列表，自定义指令虚拟下拉列表
郊眠寺
10-20 3617
主要是写了一个指令，在elementUI的select组件上支持虚拟列表展示，我们在项目使用自定义指令支持下拉框的虚拟列表* 使用第三方插件实现虚拟列表* 本文实例源码* 个人比较推荐社区优秀成熟的第三方库去满足我们的业务，自己虽然手写了一个指令支持虚拟列表，但是在业务时间紧凑的情况下，肯定优先使用插件，除非插件不满足我们自己的业务需求，那么只能自己造轮子了。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
前端VUE3.0,DAY28，vue自定义指令
疯子的梦想@的博客
09-01 214
VUE3.0,DAY28自定义指令案例需求示范1案例需求示范2总结 自定义指令 1.自定义指令，即DOM元素需要自己进行操作，比如v-show是内嵌指令，背后有个display的DOM操作是vue帮我们操作了，那么自定义就是不用vue，人工进行操作DOM。 案例需求示范1 2.需求:定义一个v-big指令， 和v-text功能类似， 但会把绑定的数值放大10倍。 <!DOCTYPE html> <html lang="en"> <head> <meta c
自定义指令集合
lhkaixin的博客
07-05 486
超实用：Vue 自定义指令合集 前端大全今天 ↓推荐关注↓ 大前端技术之路 分享Web前端，Node.js、React Native等大前端技术栈精选 14篇原创内容 公众号 在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。 你可以将一些css样式抽象到指令中，也可以将一些js操作放到指令中去执行。就使用上来说，指令不用像组件一样需要引入和注册，注册后使用非常简洁方便。 对于在项...
JavaScript自定义有用功能集合
不吃鱼的猫
11-28 393
此文记录一些JavaScript没有内置但日常工作中有可能用到的自定义功能。
分享几个vue常用的自定义指令
杨振洲的博客
12-24 407
https://segmentfault.com/a/1190000038475001
vue数字校验-不填写的状况以及可以输入小数点
小馒头味的博客
06-18 2607
java8常用特性 数字校验使用(驼峰式) : v-enter-number2 <el-input v-enter-number2 v-model="dataForm.longitude" /> 页面校验 作用:校验数字范围以及不填写的情况 rules: { longitude: [{ validator:(rule,value,callback)...
vue自定义指令，限制input输入框只能输入纯数字
web前端学习总结
07-03 4160
Vue.directive('enterNumber', { //全局方法 限制input输入框只能输入纯数字 组件中调用如（<el-input v-enter-number v-model="number" ></el-input>） inserted: function(el) { el.addEventListener("keypress", function(e) { e = e || window.event; let charcode
ant如何给form表达中得输入框加正则
ljljlj1993的博客
09-05 1570
举例子:a-input-bumber <a-input-number v-enter-number style="width: 100%" :min="1" :max="30" v-decorator="['TAXPOINT',{rules:[{required:true...
Vue：八种实用的自定义指令，2024年最新字节跳动前端面试题库
最新发布
2401_83974117的博客
04-10 637
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~篇幅有限，仅展示部分内容一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
vue指令：限制输入数字，可配置最大值最小值及小数点位数
tangyuhui
07-18 9093
directives: { // 保留2位小数点指令 不四舍五入 fixNumber: { update: function (el, { value, modifiers }, vnode) { try { let input = el.children[0] if (!inpu...
"前端vue框架2023面试：优点、数据传递与指令解析
首先，Vue框架只关注视图层，是一个构建数据的视图集合，大小只有几十kb，这使得它在项目中的引入和使用非常轻便。其次，Vue框架由国人开发，拥有完善的中文文档，消除了语言障碍，让开发者更容易理解和学习。另外，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值