• [Vue] 自定义命令

    Vue 自定义命令

    官方的vue命令包括：v-html v-if v-else v-show v-for等等为了提高效率，减少重复项编写，vue支持自定义命令，可以封装一些DOM操作，扩展额外的功能

    语法

    注册

    • 全局注册

    1. //在main.js中
    2. Vue.directive('指令名', {
    3.   "inserted" (el) {
    4.     // 可以对 el 标签，扩展额外功能
    5.     el.focus()
    6.   }
    7. })

    • 局部注册

    1. //在Vue组件的配置项中
    2. directives: {
    3.   "指令名": {
    4.     inserted () {
    5.       // 可以对 el 标签，扩展额外功能
    6.       el.focus()
    7.     }
    8.   }
    9. }

    使用

    注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。

    如： 注册指令时不用加v-前缀，但使用时一定要加v-前缀

    扩展

    钩子函数:

    Vue 2.X 与 Vue 3.X 相比，钩子函数是存在变化的

    Vue 2.X钩子函数：

    • bind：自定义指令绑定到DOM后调用。只调用一次，指令第一次绑定到元素的调用。在这里可以进行一次性的初始化设置。注意：只是加入进了DOM，但是渲染没有完成。

    • inserted：自定义指令所在DOM，插入到父DOM后调用，渲染已经完成（父节点存在即可调用，不必存在于document中）。

    • update：元素更新，但子元素尚未更新，将调用此钩子（自定义指令所在组件更新时执行，但是不保证更新完成）,和自定义指令所在组件有关。

    • componentUpdated：组件和子级更新后执行（自定义指令所在组件更新完成，且子组件也完成更新）

    • unbind：解绑（销毁）（自定义指令所在DOM销毁时执行），只调用一次。

    Vue 3.X钩子函数：

    • created：自定义指令所在组件，创建后调用

    • beforeMount：相当于Vue 2.X中的bind，当元素被插入到DOM前调用

    • mounted：相当于Vue 2.X中的inserted，当绑定元素的父组件被挂载后调用

    • beforeUpdate：绑定元素的父组件更新前调用

    • updated：相当于Vue 2.X中的componentUpdated，在绑定元素的父组件及他自己的所有子节点都更新后调用

    • beforeUnmount：绑定元素的父组件卸载前调用

    • unmounted：绑定元素的父组件卸载后调用

    钩子函数参数

    指令的钩子会传递以下几种参数：

    • el：指令绑定到的元素。这可以直接操作DOM。

    • binding：一个对象，包含以下属性。

      • value：传递给指令的值。例如在v-my-directive="1+1"中，值是2.

      • oldValue：之前的值，仅在beforeUpdate和updated中可用。无论值是否更改，它都可用.

    • arg：传递给指令的参数（如果有的话）。例如在v-my-directive:foo中，参数是"foo".

    • modifiers：一个包含修饰符的对象（如果有的话）。例如在v-my-directive:foo:bar中，修饰符对象是{ foo: true, bar: true }.

    • instance：使用该指令的组件实例.

    • dir：指令的定义对象.

    • vnode：代表绑定元素的底层VNode。虚拟DOM节点，一个真实DOM元素的蓝图，对应el.

    • prevNode：上一个虚拟节点。之前的渲染中代表指令所绑定元素的VNode。仅在beforUpdate和updated钩子中使用.

    常用指令
    1.复制粘贴指令 v-copy

    实现：一键复制文本内容，用于粘贴思路：1.动态创建textarea标签，并设置reaOnly属性及移除可视区域2.将要复制的值赋给textarea标签的value属性，并插入到body3.选中值textarea并复制4.将body中插入的textarea移除5.在第一次调用时绑定事件，在解绑时移除事件

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

    使用：给DOM节点加上v-copy及复制文本即可

    2. ​
    2.长按指令 v-longpress

    实现：长按超过两秒，执行回调函数思路：1.创建一个计时器，两秒后执行函数2.当用户按下按钮时触发mousedown事件（移动端touchstart事件)，启动计时器；3.用户松开按钮时调用mouseout事件（移动端touchend事件）4.如果mouseup事件在两秒内触发，此事件当作普通点击事件5.如果计时器没有在两秒内清除，定为长按事件，触发相关回调函数

    1. const longpress = {
    2.     bind: (el, binding, vNode) {
    3.         // 没有绑定函数抛出错误
    4.         if (typeof binding.value !== 'function') {
    5.             throw 'longpress callback not a function'
    6.         }
    7. ​
    8.         // 计时器变量
    9.         el._timer = null
    10.         // 运行函数
    11.         el._handler = e => {
    12.             binding.value(e)
    13.         }
    14.         // 创建计时器（2秒后执行函数）
    15.         el._start = e => {
    16.             // 0为鼠标左键
    17.             if (e.type === 'click' && e.button !== 0) return
    18. ​
    19.             if (el._timer === null) {
    20.                 el._timer = setTimeout(_ => {
    21.                     el._handler()
    22.                 }, 2000)
    23. ​
    24.                 // 取消浏览器默认事件
    25.                 el.addEventListener('contextmenu', e => {
    26.                     e.preventDefault()
    27.                 })
    28.             }
    29.         }
    30.         // 两秒内松手，取消计时器
    31.         el._cancel = e => {
    32.             if (el._timer !== null) {
    33.                 clearTimeout(el._timer)
    34.                 el._timer = null
    35.             }
    36.         }
    37. ​
    38.         // 添加计时监听
    39.         el.addEventListener('mousedown', el._start)
    40.         el.addEventListener('touchstart', el._start)
    41.         // 添加取消监听
    42.         el.addEventListener('click', el._cancel)
    43.         el.addEventListener('mouseout', el._cancel)
    44.         el.addEventListener('touchend', el._cancel)
    45.         el.addEventListener('touchcancel', el._cancel)
    46.     },
    47.     unbind(el) {
    48.         // 移除监听
    49.         el.removeEventListener('mousedown', el._start)
    50.         el.removeEventListener('touchstart', el._start)
    51.         el.removeEventListener('click', el._cancel)
    52.         el.removeEventListener('mouseout', el._cancel)
    53.         el.removeEventListener('touchend', el._cancel)
    54.         el.removeEventListener('touchcancel', el._cancel)
    55.     }
    56. }
    57. ​
    58. export default longpress

    使用：给DOM节点加上v-longpress及相应回调函数

    2. ​
    3.防抖指令 v-debounce

    场景：项目开发中，经常会遇到按钮多次点击后，重复请求接口，造成数据混乱，例如表单提交。实现：使用防抖，防止按钮在短时间内多次点击，设置按钮在1秒内只能点击一次。思路：1.定义延时方法，在1秒内再调用该方法，则重新计算执行时间2.将事件绑定在点击方法上

    1. const debounce = {
    2.     inserted: (el, binding) => {
    3.         // 没有绑定函数抛出错误
    4.         if (typeof binding.value !== 'function') {
    5.             throw 'debounce callback not a function'
    6.         }
    7. ​
    8.         let timer
    9.         el.addEventListener('click', () => {
    10.             if (timer) clearTimeout(timer)
    11. ​
    12.             timer = setTimeout(_ => {
    13.                 binding.value()
    14.             }, 1000)
    15.         })
    16.     }
    17. }
    18. ​
    19. export default debounce

    使用：给DOM节点加上v-debounce及回调函数

    2. ​
    4.节流指令 v-throttle

    场景：同防抖指令场景实现：使用节流方法，限制1秒内按钮只能点击一次思路：1.定义一个开关，默认时打开状态2.在点击按钮后关闭开关，在1秒内再点击按钮，不执行回调函数3.1秒过后，开关打开

    1. const throttle = {
    2.     bind: (el, binding) => {
    3.         // 没有绑定函数抛出错误
    4.         if (typeof binding.value !== 'function') {
    5.             throw 'throttle callback not a function'
    6.         }
    7. ​
    8.         // 开关
    9.         el._flag = true
    10.         el._timer = null
    11.         el._handler = () => {
    12.             if (!el._flag) return
    13. ​
    14.             // 函数执行后关闭开关
    15.             el._flag && binding.value()
    16.             el._flag = false
    17. ​
    18.             if (el._timer) clearTimeout(el._timer)
    19. ​
    20.             el._timer = setTimeout(_ => {
    21.                 el._flag = true
    22.             }, 1000)
    23.         }
    24.         el.addEventListener('click', el._handler)
    25.     },
    26.     unbind: (el, binding) => {
    27.         el.removeEventListener('click', el._handler)
    28.     }
    29. }
    30. ​
    31. export default throttle

    使用：给DOM节点加上v-throttle及回调函数

    2. ​
    5.点击元素外部指令 v-clickOut

    场景：弹窗，点击弹窗外部（即蒙版），关闭弹窗实现：点击指定区域外部，执行相应回调函数思路：判断点击的元素是否指定元素是则不执行，否则执行相应回调函数

    1. const clickOut = {
    2.     bind: (el, binding) => {
    3.         el._handler = e => {
    4.             // 判断点击的元素是否本身，是则返回
    5.             if (el.contains(e.target)) return
    6. ​
    7.             // 如果绑定了函数，则调用函数
    8.             if (typeof binding.value === 'function') {
    9.                 binding.value()
    10.             }
    11.         }
    12. ​
    13.         // 添加事件监听
    14.         setTimeout(_ => {
    15.             document.addEventListener('click', el._handler)
    16.         }, 0)
    17.     },
    18.     unbind(el) {
    19.         // 解除事件监听
    20.         document.removeEventListener('click', el._handler)
    21.     }
    22. }
    23. ​
    24. export default clickOut

    使用：给指定DOM节点加v-clickOut及回调函数

    2. ​
    6.拖拽指令 v-draggable

    实现：指定元素在可视区域内任意拖拽思路：设置指定元素相对定位，父元素绝对定位鼠标按下时（触发onmousedown事件）时记录指定元素当前的left、top值鼠标移动时（触发onmousemove事件）时计算每次移动的横向距离、纵向距离，并改变left、top值鼠标松开时（触发onmouseup事件）时完成一次拖拽

    1. const draggable = {
    2.     inserted: (el) => {
    3.         el.style.cursor = 'move'
    4.         el._onmousedown = e => {
    5.             // 记录当前的left、top值
    6.             let disX = e.pageX - el.offsetLeft
    7.             let disY = e.pageY - el.offsetTop
    8. ​
    9.             // 鼠标移动
    10.             document.onmousemove = e => {
    11.                 let x = e.pageX - disX
    12.                 let y = e.pageY - disY
    13. ​
    14.                 // 临界值处理
    15.                 let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
    16.                 let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
    17. ​
    18.                 if (x < 0) {
    19.                     x = 0
    20.                 } else if (x > maxX) {
    21.                     x = maxX
    22.                 }
    23. ​
    24.                 if (y < 0) {
    25.                     y = 0
    26.                 } else if (y > maxY) {
    27.                     y = maxY
    28.                 }
    29. ​
    30.                 el.style.left = `${x}px`
    31.                 el.style.top = `${y}px`
    32.             }
    33.             document.onmouseup = _ => {
    34.                 document.onmousemove = document.onmouseup = null
    35.             }
    36.         }
    37.     }
    38. }
    39. ​
    40. export default draggable

    使用：给指定DOM节点加v-draggable即可

    7.水印指令 v-Money

    实现：给指定页面添加背景水印思路：使用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 cans = 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. ​
    18. const waterMarker = {
    19.     bind: function (el, binding) {
    20.         addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
    21.     }
    22. }
    23. ​
    24. export default waterMarker

    使用：给DOM节点加上v-waterMarker，并设置水印文案，字体大小及颜色等

    2.  
    3. <script>
    4.     export default {
    5.         waterMarker: {
    6.             text: '版权所有',
    7.             font: '14px Microsoft Fangc',
    8.             textColor: 'rgba(180, 180, 180, 0.4)'
    9.         }
    10.     }
    11. script>
    12.  
    13. <style lang="scss" scoped>
    14. .water-marker {
    15.   width: 400px;
    16.   height: 400px;
    17.   border: 1px solid #eee;
    18. }
    19. style>

  • 相关阅读:
    一文了解ZooKeeper基础命令和应用
    静态版通讯录
    嵌入式开发：5个修订控制最佳实践
    [代码随想录]回溯、贪心算法篇
    Python数据结构基础教学，从零基础小白到实战大佬！
    Golang定时器
    学习潘海东博士的《潮汐调和分析原理和应用》和调和分析软件S_Tide
    并查集_find()_连通块_食物链
    前端常见的十种布局
    公司实战 ElasticSearch+Kafka+Redis+MySQL
  • 原文地址：https://blog.csdn.net/qq_29069649/article/details/136669944