vue全局注册指令

新建 directives/index.js 文件

import copy from './copy'
import longpress from './longpress'
// 自定义指令
const directives = {
  copy,
  longpress,
}

export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  },
}

在 main.js 引入并调用

import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)

常用指令

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

防抖指令 v-debounce

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

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

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

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

<template>
  <button v-debounce="debounceClick">防抖</button>
</template>

<script>
export default {
  methods: {
    debounceClick () {
      console.log('只触发一次')
    }
  }
}

权限校验指令 v-premission

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

思路:

1.自定义一个权限数组
2.判断用户的权限是否在这个数组内，如果是则显示，否则则移除 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-drag

const drag = {
  inserted: function (el, binding) {
    el.onmousedown = function(e) {
      e.preventDefault()
      var disx = e.pageX - el.offsetLeft
      var disy = e.pageY - el.offsetTop
    
        document.onmousemove = function(e) {
          // 鼠标位置-鼠标相对元素位置=元素位置
          let left = e.clientX - disx;
          let top = e.clientY - disy;
          // 限制拖拽范围不超出可视区
          if ( left <= 0) {
            left = 5    // 设置成5,离边缘不要太近
          } else if (left > document.documentElement.clientWidth - el.clientWidth) {
          // document.documentElement.clientWidth屏幕可视区宽度
            left = document.documentElement.clientWidth - el.clientWidth - 5
          }

          if ( top <= 0) {
            top = 5
          } else if (top > document.documentElement.clientHeight - el.clientHeight) {
            top = document.documentElement.clientHeight - el.clientHeight - 5
          }
          el.style.left = left + 'px'
          el.style.top= top + 'px'
        }
         document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null
          }
    }
  }
}