自定义指令，常用的自定义指令

什么是自定义指令

开发Vue项目时，大多数人都会使用到Vue内置的一些指令，例如v-model、v-if等，不过指令也是可以自定义的，为什需要自定义一个指令，其实就是想更加简洁地重复使用操作DOM的逻辑，这就和组件化和组合式函数差不多。不管是内置的指令还是自定义指令，都是类似于组件的生命周期，可以在不同的生命周期完成不同的逻辑操作，并绑定到组件元素上，这就产生了自定义指令。

自定义指令的定义方式非常简单，只需要调用Vue.directive( )方法，并传入两个参数：指令名称和指令选择对象。指令选择对象可以包含多个属性。

自定义指令的两种作用域

自定义指令可以定义全局的，也可以定义局部的。局部的自定义指令就只能在当前的.vue文件中使用，全局的则可以在所有的 .vue中使用

局部自定义指令

<script lang="ts">
  import {ref} from 'vue'
  export default {
    name:'MyVue01',
    setup() {
      const a=ref(1)
      const btnClick = () =>{
        a.value++
      }
      return {
        a,
        btnClick
      }
    },
    directives: {
      onceClick:{
        mounted(el,binding,vnode) {
          el.addEventListener('click',()=>{
            if (!el.disabled) {
              el.disabled = true
              setTimeout( ()=>{
                el.disabled = false
              }, binding.value || 1000)
            }
          })
        },
      }
    }

  }
</script>
<template>
  <main>
    <button v-onceClick="1000" @click="btnClick">按钮</button>
  </main>
</template>

 自定义了一个名叫 onceClick 的指令，给一个 button 按钮加上这个指令之后，可以设置这个 button 按钮在点击多久之后，处于禁用状态，防止用户重复点击。

全局自定义指令

全局指令我们一般写在 main.js 中，或者写一个单独的 js 文件然后在 main.js 中引入，下面的例子是直接写在 main.js 中

const app = createApp(App)
app.directive('onceClick', {
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabied = true;
                setTimeout(() => {
                    el.disabled = false;
                }, isBindingElement.value || 10000)
            }
        })
    },
})

自定义指令的生命周期

指令的生命周期和组件的生命周期类似：

//没有beforeCreated生命周期
app.directive('focus', {
    //在绑定元素的属性前，或者事件监听器应用前调用
  created() {
    console.log('created');
  },
    //元素被插入到DOM前调用，例如我们想要实现输入框的自动聚焦，就不能在beforeMount钩子中实现
  beforeMount() {
    console.log('beforeMount');
  },
    //绑定元素的父组件以及自己的所有子节点都挂载完毕后调用，这个时候DOM已经渲染出来，我们实现输入框自动聚焦也是在这个钩子函数中实现
  mounted() {
    console.log('mounted');
  },
    //绑定元素的父组件更新前调用
  beforeUpdate() {
    console.log('beforeUpdate');
  },
    //绑定元素的父组件以及自己的所有子节点都更新完毕后调用
  updated() {
    console.log('updated');
  },
    //绑定元素的父组件卸载前调用
  beforeUnmount() {
    console.log('beforeUnmount');
  },
    //绑定元素的父组件卸载后调用
  unmounted() {
    console.log('unmounted');
  }
})

生命周期四个参数

• el：指令所绑定的元素，可以用来直接操作 DOM，我们松哥说想实现一个可以自动判断组件显示还是隐藏的指令，那么就可以通过 el 对象来操作 DOM 节点，进而实现组件的隐藏。
• binding：我们通过自定义指令传递的各种参数，主要存在于这个对象中，该对象属性较多，如下属性是我们日常开发使用较多的几个：

                name：指令名，不包括 v- 前缀。

                value：指令的绑定值，例如：v-hasPermission="['user:delete']"​ 中，绑定值为'user:delete'，不过需要小伙伴们注意的是，这个绑定值可以是数组也可以是普通对象，关键是看你具体绑定的是什么，在 2.1 小节的案例中，我们的 value 就是一个数字。

                expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

                arg：传给指令的参数，可选。例如v-hasPermission:[name]="'zhangsan'" 中，参数为 "name"。

• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

实用的自定义指令

1. 复制粘贴指令 v-copy

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

思路：①动态创建textarea标签，并设置readOnly属性及移出可视区域。②将要复制的值赋给textarea标签的value属性，并插入到body。③选中textarea移除。⑤在第一次调用时绑定事件，在解绑时移除事件

const copy = {
    bind(el, {value}){
        el.$value = value
        el.handler = () => {
            if (!el.$value) {
                //值为空 控制台打印提示 
                console.log('无内容');
                return
            }
            //动态创建 textarea 标签
            const textarea = document.createElement('textarea')
            // 将该 textarea 设为 readonly 防止 ios 下自动唤起键盘，同时将textarea移出可视区域
            textarea.readOnly='readonly' 
            textarea.style.position='absolute'
            textarea.style.left='-9999px'
            //将要copy 的值赋给textatea标签的value属性
            textarea.value = el.$value
            document.body.appendChild(textarea)
            textarea.select()
            const result=document.execCommand('copy')
            // 控制台打印提示
            if (result) {
                console.log('复制成功');
            }
            document.body.removeChild(textarea)
        }
        el.addEventListener('click', el.handler)
    },
    //当传进来的值更新的时候触发
    componentUpdated(el,{value}){
        el.$value = value
    },
    //指令与元素解绑的时候，移除事件绑定
    unbind(el) {
        el.removeEventListener('click', el.handler)
    },
}
export default copy

 使用：

<template>
        <div>
            nihao
            <button v-copy="copyText">复制</button>
            {{ copyText }}
        </div>
</template>
    
<script>
    export default {
        data() {
            return {
                copyText:'vue-3'
            }
        },
    }
</script>

2. 长按指令 v-longpress

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

思路：①创建一个计时器，2秒后执行函数。②当用户按下按钮时触发mousedown事件，启动计时器，用户松开按钮时调用mouseout事件。③如果mouseup事件2秒内被触发，就清除计时器，当做一个普通点击事件。④如果计时器没有在2秒内清除，则判定为一次长按，可以执行关联的函数。⑤在移动端要考虑touchstart，touchend事件

const longpress = {
  bind: function (el, binding, vNode) {
    if (typeof binding.value !== 'function') {
      throw 'callback must be a function'
    }
    // 定义变量
    let pressTimer = null
    // 创建计时器（ 2秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, 2000)
      }
    }
    // 取消计时器
    let cancel = (e) => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 运行函数
    const handler = (e) => {
      binding.value(e)
    }
    // 添加事件监听器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消计时器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}
 
export default longpress

 使用：

<template>
  <button v-longpress="longpress">长按</button>
</template>
 
<script> export default {
  methods: {
    longpress () {
      alert('长按指令生效')
    }
  }
} </script>

输入框防抖指令 v-debounce

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

思路：① 定义一个延迟执行的方法，如果在延迟时间内在调用该方法，则重新计算执行时间。②将时间绑定在 click 方法上

const debounce = {
  inserted: function (el, binding) {
    let timer
    el.addEventListener('keyup', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 1000)
    })
  },
}
 
export default debounce

 使用：

<template>
  <button v-debounce="debounceClick">防抖</button>
</template>
 
<script> export default {
  methods: {
    debounceClick () {
      console.log('只触发一次')
    }
  }
} </script>

禁止表情及特殊字符 v-emoji

let findEle = (parent, type) => {
  return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}
 
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}
 
const emoji = {
  bind: function (el, binding, vnode) {
    // 正则规则可根据需求自定义
    var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
    let $inp = findEle(el, 'input')
    el.$inp = $inp
    $inp.handle = function () {
      let val = $inp.value
      $inp.value = val.replace(regRule, '')
 
      trigger($inp, 'input')
    }
    $inp.addEventListener('keyup', $inp.handle)
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle)
  },
}
 
export default emoji

 使用：

<template>
  <input type="text" v-model="note" v-emoji />
</template>

图片懒加载 v-LazyLoad

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

思路：①判断当前图片是否到了可视区域这一核心逻辑实现的。②拿到所有的图片Dom遍力每个图片判断当前图片是否到了可视区范围内。③如果到了就设置图片的src属性，否则显示默认图片

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

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

 

const LazyLoad = {
    install(Vue,options) {
        const defaultSrc = options.default
        Vue.directive('lazy',{
            bind(el,binding){
                LazyLoad.init(el,binding.value,defaultSrc)
            },
            inserted(el){
                if (IntersectionObserver) {
                    LazyLoad.observe(el)
                }else{
                    LazyLoad.listenerScroll(el)
                }
            },
        })
    },
    init(el,val,def){
        el.setAttribute('data-src',val)
        el.setAttribute('src',def)
    },
    observe(el){
        var io = new IntersectionObserver((entries)=>{
            const realSrc = el.dataset.src
            if (entries[0],isIntersecting) {
                if (realSrc) {
                    el.src = realSrc
                    el.removeAttribute('data-src')
                }
            }
        })
        io.observe(el)
    },
    listenerScroll(el){
        const handler=LazyLoad.throttle(LazyLoad.load,300)
        LazyLoad.load(el)
        window.addEventListener('scroll',()=>{
            handler(el)
        })
    },
    load(el){
        const windowHeight=document.documentElement.clientHeight
        const elTop=el.getBoundingClientRect().top
        const elBtm=el.getBoundingClientRect().bottom
        const realSrc=el.dataset.src
        if (elTop-windowHeight<0 && elBtm > 0) {
            if (realSrc) {
                el.src=realSrc
                el.removeAttribute('data-src')
            }
        }
    },
    throttle(fn,delay){
        let timer
        let prevTime
        return (...args)=>{
            const currTime=Date.now()
            const context= this
            if (!prevTime) prevTime = currTime
            clearTimeout(timer)
            if (currTime-prevTime>delay) {
                prevTime = currTime
                fn.apply(context,args)
                clearTimeout(timer)
                return
            }
            timer = setTimeout(()=>{
                prevTime=Date.now()
                timer=null
                fn.apply(context,args)
            },delay)
        }
    }
}
export default LazyLoad

 使用：

<img v-LazyLoad="17.png" />

权限校验指令 v-premission

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

思路：①自定义一个权限 数组 ② 判断用户的权限是否在这个数组内，如果是则显示，否则则移除Dom

function checkArray(key) {
  let arr = ['1', '2', '3', '4']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}
 
const permission = {
  inserted: function (el, binding) {
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}
 
export default permission

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

<div class="btns">
  <!-- 显示 -->
  <button v-permission="'1'">权限按钮1</button>
  <!-- 不显示 -->
  <button v-permission="'10'">权限按钮2</button>
</div>

实现页面水印 v-waterMarker

给整个页面添加背景水印

思路：① 使用canvas特性生成base64格式的图片文件，设置其字体大小，颜色 ② 将其设置为背景图片，从而实现页面或组件水印效果

function addWaterMarker(str, parentNode, font, textColor) {
  // 水印文字，父元素，字体，文字颜色
  var can = document.createElement('canvas')
  parentNode.appendChild(can)
  can.width = 200
  can.height = 150
  can.style.display = 'none'
  var cans = can.getContext('2d')
  cans.rotate((-20 * Math.PI) / 180)
  cans.font = font || '16px Microsoft JhengHei'
  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
 
const waterMarker = {
  bind: function (el, binding) {
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
  },
}
 
export default waterMarker

 使用，

<template>
  <div v-waterMarker="{text:'lzg版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
</template>

拖拽指令 v-draggable

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

思路：①设置需要拖拽的元素为相对定位，其父元素为绝对定位。②鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。③鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值④鼠标松开(onmouseup)时完成一次拖拽

const draggable = {
  inserted: function (el) {
    el.style.cursor = 'move'
    el.onmousedown = function (e) {
      let disx = e.pageX - el.offsetLeft
      let disy = e.pageY - el.offsetTop
      document.onmousemove = function (e) {
        let x = e.pageX - disx
        let y = e.pageY - disy
        let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
        let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
        if (x < 0) {
          x = 0
        } else if (x > maxX) {
          x = maxX
        }
 
        if (y < 0) {
          y = 0
        } else if (y > maxY) {
          y = maxY
        }
 
        el.style.left = x + 'px'
        el.style.top = y + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  },
}
export default draggable

 使用：

<template>
  <div class="el-dialog" v-draggable></div>
</template>

总结：本人才疏学浅，水平有限，请大家多多包涵和指点。多谢🤝🫡 👍。  加油✊🫶