135-1821-9792

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

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

专注于为中小企业提供网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业晋宁免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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

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

在 main.js 引入并调用 

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

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

  •  bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
  •  inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  •  update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
  •  componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  •  unbind: 只调用一次， 指令与元素解绑时调用。

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

  •  复制粘贴指令 v-copy
  •  长按指令 v-longpress
  •  输入框防抖指令 v-debounce
  •  禁止表情及特殊字符 v-emoji
  •  图片懒加载 v-LazyLoad
  •  权限校验指令 v-premission
  •  实现页面水印 v-waterMarker
  •  拖拽指令 v-draggable

v-copy

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

思路：

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

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

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

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. 复制代码 
    4.

v-longpress

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

思路：

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

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

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

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

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. 复制代码 
    4.

v-debounce

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

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

思路：

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

2.将事件绑定在 click 方法上。 

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. 复制代码 
    4.

v-emoji

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. 复制代码 
    4.

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

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2. 复制代码 
    3.

v-LazyLoad

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

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

思路：

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

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

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2. 复制代码 
    3.

v-permission

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

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

思路：

1.自定义一个权限数组

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

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

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.    
    3. 
  
  
  
  3.    权限按钮1  
    4. 
  
  
  
  4.     
    5. 
  
  
  
  5.   权限按钮2  
    6.
  
  • 复制代码 

    • vue-waterMarker

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

    思路：

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

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

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

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

     
 
 
      
  
  
  
    1.   
      2. 
  
  
  
    2. 复制代码 
      3.

    v-draggable

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

    思路：

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

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

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

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

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

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

     
 
 
      
  
  
  
    1.   
      2. 
  
  
  
    2. 复制代码 
      3.

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


    本文名称：分享8个非常实用的Vue自定义指令
    标题URL：http://www.wtcwzsj.com/article/cdphehp.html

    其他资讯

    
    关于我们
    我们的服务
    网站建设案例
    新闻动态
    联系我们

    135-1821-9792

    公司服务热线
    友情链接： 成都网站排名   贵阳联通机房   广安网站建设   四川发电机维修   德阳机房托管   木托盘厂   成都食品包装设计   移动服务器托管   衣柜书柜酒柜定制   成都400电话办理   

    Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号