文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

分享8个非常实用的Vue自定义指令

2024-12-03 14:32

关注

【导读】：入门级范例，结合Vue文档使用更佳。推荐用于新手学习，不推荐直接用于生产环境。

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册  自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

批量注册指令，新建 directives/index.js 文件 

  1. import copy from './copy'  
  2. import longpress from './longpress'  
  3. // 自定义指令  
  4. const directives = {  
  5.   copy,  
  6.   longpress,  
  7. }  
  8. export default {  
  9.   install(Vue) {  
  10.     Object.keys(directives).forEach((key) => {  
  11.       Vue.directive(key, directives[key])  
  12.     })  
  13.   },  
  14. }  
  15. 复制代码 

在 main.js 引入并调用 

  1. import Vue from 'vue'  
  2. import Directives from './JS/directives'  
  3. Vue.use(Directives)  
  4. 复制代码 

指令定义函数提供了几个钩子函数（可选）：

下面分享几个实用的 Vue 自定义指令

v-copy

需求：实现一键复制文本内容，用于鼠标右键粘贴。

思路：

动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域

将要复制的值赋给 textarea 标签的 value 属性，并插入到 body

选中值 textarea 并复制 4.将 body 中插入的 textarea 移除

在第一次调用时绑定事件，在解绑时移除事件 

  1. const copy = {  
  2.   bind(el, { value }) {  
  3.     el.$valuevalue = value  
  4.     el.handler = () => { 
  5.        if (!el.$value) {  
  6.         // 值为空的时候，给出提示。可根据项目UI仔细设计  
  7.         console.log('无复制内容')  
  8.         return  
  9.       }  
  10.       // 动态创建 textarea 标签  
  11.       const textarea = document.createElement('textarea')  
  12.       // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域  
  13.       textarea.readOnly = 'readonly'  
  14.       textarea.style.position = 'absolute'  
  15.       textarea.style.left = '-9999px'  
  16.       // 将要 copy 的值赋给 textarea 标签的 value 属性  
  17.       textarea.value = el.$value  
  18.       // 将 textarea 插入到 body 中  
  19.       document.body.appendChild(textarea)  
  20.       // 选中值并复制  
  21.       textarea.select()  
  22.       const result = document.execCommand('Copy')  
  23.       if (result) {  
  24.         console.log('复制成功') // 可根据项目UI仔细设计  
  25.       }  
  26.       document.body.removeChild(textarea)  
  27.     }  
  28.     // 绑定点击事件，就是所谓的一键 copy 啦  
  29.     el.addEventListener('click', el.handler)  
  30.   },  
  31.   // 当传进来的值更新的时候触发  
  32.   componentUpdated(el, { value }) {  
  33.     el.$valuevalue = value  
  34.   },  
  35.   // 指令与元素解绑的时候，移除事件绑定  
  36.   unbind(el) {  
  37.     el.removeEventListener('click', el.handler)  
  38.   },  
  39. }  
  40. export default copy  
  41. 复制代码 

使用：给 Dom 加上 v-copy 及复制的文本即可 

  1. <template>  
  2.   <button v-copy="copyText">复制button>  
  3. template>  
  4. <script>  
  5.   export default {  
  6.     data() {  
  7.       return {  
  8.         copyText: 'a copy directives',  
  9.       }  
  10.     },  
  11.   }  
  12. script>  
  13. 复制代码 

v-longpress

需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件

思路：

创建一个计时器， 2 秒后执行函数

当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout 事件。

如果 mouseup 事件 2 秒内被触发，就清除计时器，当作一个普通的点击事件

如果计时器没有在 2 秒内清除，则判定为一次长按，可以执行关联的函数。

在移动端要考虑 touchstart，touchend 事件 

  1. const longpress = {  
  2.   bind: function (el, binding, vNode) {  
  3.     if (typeof binding.value !== 'function') {  
  4.       throw 'callback must be a function'  
  5.     }  
  6.     // 定义变量  
  7.     let pressTimer = null  
  8.     // 创建计时器（ 2秒后执行函数 ）  
  9.     let start = (e) => {  
  10.       if (e.type === 'click' && e.button !== 0) {  
  11.         return  
  12.       }  
  13.       if (pressTimer === null) {  
  14.         pressTimer = setTimeout(() => {  
  15.           handler()  
  16.         }, 2000)  
  17.       }  
  18.     }  
  19.     // 取消计时器  
  20.     let cancel = (e) => {  
  21.       if (pressTimer !== null) {  
  22.         clearTimeout(pressTimer)  
  23.         pressTimer = null  
  24.       }  
  25.     }  
  26.     // 运行函数  
  27.     const handler = (e) => { 
  28.        binding.value(e)  
  29.     }  
  30.     // 添加事件监听器  
  31.     el.addEventListener('mousedown', start)  
  32.     el.addEventListener('touchstart', start)  
  33.     // 取消计时器  
  34.     el.addEventListener('click', cancel)  
  35.     el.addEventListener('mouseout', cancel)  
  36.     el.addEventListener('touchend', cancel)  
  37.     el.addEventListener('touchcancel', cancel)  
  38.   },  
  39.   // 当传进来的值更新的时候触发  
  40.   componentUpdated(el, { value }) {  
  41.     el.$valuevalue = value  
  42.   },  
  43.   // 指令与元素解绑的时候，移除事件绑定  
  44.   unbind(el) {  
  45.     el.removeEventListener('click', el.handler)  
  46.   },  
  47. }  
  48. export default longpress  
  49. 复制代码 

使用：给 Dom 加上 v-longpress 及回调函数即可 

  1. <template>  
  2.   <button v-longpress="longpress">长按button>  
  3. template>  
  4. <script>  
  5. export default {  
  6.   methods: {  
  7.     longpress () {  
  8.       alert('长按指令生效')  
  9.     }  
  10.   }  
  11. } 
  12.  script>  
  13. 复制代码 

v-debounce

背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。

需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。

思路：

定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。

将事件绑定在 click 方法上。 

  1. const debounce = {  
  2.   inserted: function (el, binding) {  
  3.     let timer  
  4.     el.addEventListener('click', () => {  
  5.       if (timer) {  
  6.         clearTimeout(timer)  
  7.       }  
  8.       timer = setTimeout(() => {  
  9.         binding.value()  
  10.       }, 1000)  
  11.     })  
  12.   },  
  13. }  
  14. export default debounce  
  15. 复制代码 

使用：给 Dom 加上 v-debounce 及回调函数即可 

  1. <template>  
  2.   <button v-debounce="debounceClick">防抖button>  
  3. template>  
  4. <script>  
  5. export default {  
  6.   methods: {  
  7.     debounceClick () {  
  8.       console.log('只触发一次')  
  9.     }  
  10.   }  
  11. }  
  12. script>  
  13. 复制代码 

v-emoji

背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。

我们常规方法是在每一个表单的 on-change 事件上做处理。 

  1. <template>  
  2.   <input type="text" v-model="note" @change="vaidateEmoji" />  
  3. template>  
  4. <script>  
  5.   export default {  
  6.     methods: {  
  7.       vaidateEmoji() {  
  8.         var reg = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g  
  9.         thisthis.note = this.note.replace(reg, '')  
  10.       },  
  11.     },  
  12.   }  
  13. script>  
  14. 复制代码 

这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。

需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。 

  1. let findEle = (parent, type) => {  
  2.   return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)  
  3. }  
  4. const trigger = (el, type) => {  
  5.   const e = document.createEvent('HTMLEvents')  
  6.   e.initEvent(type, true, true)  
  7.   el.dispatchEvent(e)  
  8. }  
  9. const emoji = {  
  10.   bind: function (el, binding, vnode) {  
  11.     // 正则规则可根据需求自定义  
  12.     var regRule = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g  
  13.     let $inp = findEle(el, 'input')  
  14.     el.$inp = $inp  
  15.     $inp.handle = function () {  
  16.       let val = $inp.value  
  17.       $inp.value = val.replace(regRule, '')  
  18.       trigger($inp, 'input')  
  19.     }  
  20.     $inp.addEventListener('keyup', $inp.handle)  
  21.   },  
  22.   unbind: function (el) { 
  23.      el.$inp.removeEventListener('keyup', el.$inp.handle)  
  24.   },  
  25. }  
  26. export default emoji  
  27. 复制代码 

使用：将需要校验的输入框加上 v-emoji 即可 

  1. <template>  
  2.   <input type="text" v-model="note" v-emoji />  
  3. template>  
  4. 复制代码 

v-LazyLoad

背景：在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。

需求：实现一个图片懒加载指令，只加载浏览器可见区域的图片。

思路：

  1.  图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
  2.  拿到所有的图片 Dom ，遍历每个图片判断当前图片是否到了可视区范围内
  3.  如果到了就设置图片的 src 属性，否则显示默认图片

图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。

下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 IntersectionObserver API，如果支持就使用 IntersectionObserver 实现懒加载，否则则使用 srcoll 事件监听 + 节流的方法实现。 

  1. const LazyLoad = {  
  2.   // install方法  
  3.   install(Vue, options) {  
  4.     const defaultSrc = options.default  
  5.     Vue.directive('lazy', {  
  6.       bind(el, binding) {  
  7.         LazyLoad.init(el, binding.value, defaultSrc)  
  8.       },  
  9.       inserted(el) {  
  10.         if (IntersectionObserver) {  
  11.           LazyLoad.observe(el)  
  12.         } else {  
  13.           LazyLoad.listenerScroll(el)  
  14.         }  
  15.       },  
  16.     })  
  17.   },  
  18.   // 初始化  
  19.   init(el, val, def) {  
  20.     el.setAttribute('data-src', val)  
  21.     el.setAttribute('src', def)  
  22.   },  
  23.   // 利用IntersectionObserver监听el  
  24.   observe(el) {  
  25.     var io = new IntersectionObserver((entries) => {  
  26.       const realSrc = el.dataset.src  
  27.       if (entries[0].isIntersecting) {  
  28.         if (realSrc) {  
  29.           el.src = realSrc  
  30.           el.removeAttribute('data-src')  
  31.         } 
  32.       }  
  33.     })  
  34.     io.observe(el)  
  35.   },  
  36.   // 监听scroll事件  
  37.   listenerScroll(el) {  
  38.     const handler = LazyLoad.throttle(LazyLoad.load, 300)  
  39.     LazyLoad.load(el)  
  40.     window.addEventListener('scroll', () => {  
  41.       handler(el) 
  42.     })  
  43.   },  
  44.   // 加载真实图片  
  45.   load(el) {  
  46.     const windowHeight = document.documentElement.clientHeight  
  47.     const elelTop = el.getBoundingClientRect().top  
  48.     const elelBtm = el.getBoundingClientRect().bottom  
  49.     const realSrc = el.dataset.src  
  50.     if (elTop - windowHeight < 0 && elBtm > 0) {  
  51.       if (realSrc) {  
  52.         el.src = realSrc  
  53.         el.removeAttribute('data-src')  
  54.       }  
  55.     }  
  56.   },  
  57.   // 节流  
  58.   throttle(fn, delay) {  
  59.     let timer  
  60.     let prevTime  
  61.     return function (...args) {  
  62.       const currTime = Date.now()  
  63.       const context = this  
  64.       if (!prevTime) prevTime = currTime  
  65.       clearTimeout(timer)  
  66.       if (currTime - prevTime > delay) {  
  67.         prevTime = currTime  
  68.         fn.apply(context, args)  
  69.         clearTimeout(timer)  
  70.         return  
  71.       }  
  72.       timer = setTimeout(function () {  
  73.         prevTime = Date.now()  
  74.         timer = null  
  75.         fn.apply(context, args)  
  76.       }, delay)  
  77.     }  
  78.   },  
  79. }  
  80. export default LazyLoad  
  81. 复制代码 

使用，将组件内  标签的 src 换成 v-LazyLoad 

  1. <img v-LazyLoad="xxx.jpg" />  
  2. 复制代码 

v-permission

背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。

需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。

思路：

自定义一个权限数组

判断用户的权限是否在这个数组内，如果是则显示，否则则移除 Dom 

  1. function checkArray(key) {  
  2.   let arr = ['1', '2', '3', '4']  
  3.   let index = arr.indexOf(key)  
  4.   if (index > -1) {  
  5.     return true // 有权限  
  6.   } else {  
  7.     return false // 无权限  
  8.  }  
  9. }  
  10. const permission = {  
  11.   inserted: function (el, binding) {  
  12.     let permission = binding.value // 获取到 v-permission的值  
  13.     if (permission) {  
  14.       let hasPermission = checkArray(permission)  
  15.       if (!hasPermission) {  
  16.         // 没有权限 移除Dom元素  
  17.         el.parentNode && el.parentNode.removeChild(el)  
  18.       }  
  19.     }  
  20.   },  
  21. }    
  22. export default permission  
  23. 复制代码 

使用：给 v-permission 赋值判断即可 

  1. <div class="btns">  
  2.    
  3.    <button v-permission="'1'">权限按钮1button>  
  4.     
  5.   <button v-permission="'10'">权限按钮2button>  
  6. div>  
  7. 复制代码 

vue-waterMarker

需求：给整个页面添加背景水印

思路：

使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。

将其设置为背景图片，从而实现页面或组件水印效果 

  1. function addWaterMarker(str, parentNode, font, textColor) {  
  2.   // 水印文字，父元素，字体，文字颜色  
  3.   var can = document.createElement('canvas')  
  4.   parentNode.appendChild(can)  
  5.   can.width = 200  
  6.   can.height = 150  
  7.   can.style.display = 'none'  
  8.   var cancans = can.getContext('2d')  
  9.   cans.rotate((-20 * Math.PI) / 180)  
  10.   cans.font = font || '16px Microsoft JhengHei'  
  11.   cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'  
  12.   cans.textAlign = 'left'  
  13.   cans.textBaseline = 'Middle'  
  14.   cans.fillText(str, can.width / 10, can.height / 2)  
  15.   parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'  
  16. }  
  17. const waterMarker = {  
  18.   bind: function (el, binding) {  
  19.     addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)  
  20.   },  
  21. }   
  22. export default waterMarker  
  23. 复制代码 

使用，设置水印文案，颜色，字体大小即可 

  1. <template>  
  2.   <div v-waterMarker="{text:'lzg版权所有',textColor:'rgba(180, 180, 180, 0.4)'}">div>  
  3. template>  
  4. 复制代码 

v-draggable

需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。

思路：

设置需要拖拽的元素为相对定位，其父元素为绝对定位。

鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。

鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值

鼠标松开(onmouseup)时完成一次拖拽 

  1. const draggable = {  
  2.   inserted: function (el) {  
  3.     el.style.cursor = 'move'  
  4.     el.onmousedown = function (e) {  
  5.       let disx = e.pageX - el.offsetLeft  
  6.       let disy = e.pageY - el.offsetTop  
  7.       document.onmousemove = function (e) {  
  8.         let x = e.pageX - disx 
  9.          let y = e.pageY - disy  
  10.         let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)  
  11.         let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)  
  12.         if (x < 0) {  
  13.           x = 0  
  14.         } else if (x > maxX) { 
  15.            x = maxX  
  16.         }  
  17.         if (y < 0) {  
  18.           y = 0  
  19.         } else if (y > maxY) {  
  20.           y = maxY  
  21.         } 
  22.         el.style.left = x + 'px'  
  23.         el.style.top = y + 'px'  
  24.       }  
  25.       document.onmouseup = function () {  
  26.         documentdocument.onmousemove = document.onmouseup = null  
  27.       } 
  28.     }  
  29.   },  
  30. }  
  31. export default draggable  
  32. 复制代码 

使用: 在 Dom 上加上 v-draggable 即可 

  1. <template>  
  2.   <div class="el-dialog" v-draggable>div>  
  3. template>  
  4. 复制代码 

所有指令源码地址 https://github.com/Michael-lzg/v-directives 

 

来源：前端大全内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

分享8个非常实用的Vue自定义指令

后端开发Vue自定义指令2024-12-03

Vue 非常实用的自定义指令分享

后端开发2024-04-02

Vue 非常实用的自定义指令

后端开发Vue自定义指令2024-12-02

Vue自定义指令directive的使用方法分享

后端开发2023-05-15

Vue中自定义指令的三个常用方法小结

Vue中自定义指令的三个常用方法小结
后端开发2024-04-02

Vue中有哪些常用的自定义指令

后端开发2024-04-02

lottie实现vue自定义loading指令及常用指令封装详解

后端开发2024-04-02

Vue实用的自定义指令有哪些

后端开发2023-06-29

Vue自定义指令的使用实例介绍

后端开发2023-05-16

vue中4个自定义指令讲解及实例用法

后端开发2024-04-02

vue自定义指令directives及其常用钩子函数的示例分析

后端开发2023-06-28

vue自定义封装指令及实际使用的方法

后端开发2023-06-29

VUE 自定义指令的实用指南：释放前端开发的潜力

VUE 自定义指令的实用指南：释放前端开发的潜力
后端开发2024-03-14

Vue实例的高级用法：探索其自定义指令和mixins

Vue实例的高级用法：探索其自定义指令和mixins
后端开发2024-02-18
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯