vue項目中常用自定義指令的使用

一、vue項目中使用自定義指令

1、在src目錄下新建directives/index.js

import copy from './js/copy';
import longPress from './js/longPress';
import debounce from './js/debounce';
import inputNumber from './js/inputNumber';
import waterMarker from './js/waterMarker';
import draggable from './js/draggable';

const directives = {
  copy,
  longPress,
  debounce,
  inputNumber,
  waterMarker,
  draggable
}

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

2、在 main.js 引入並調用

//引入自定義指令
import Vue from 'vue'
import Directives from './directives/index';
Vue.use(Directives);

二、項目中幾個常用自定義指令

1、v-copy

/*
  需求：實現一鍵復制文本內容，用於鼠標右鍵粘貼。
  思路：
    1、動態創建 textarea 標簽，並設置 readOnly 屬性及移出可視區域
    2、將要復制的值賦給 textarea 標簽的 value 屬性，並插入到 body
    3、選中值 textarea 並復制
    4、將 body 中插入的 textarea 移除
    5、在第一次調用時綁定事件，在解綁時移除事件
  使用：給 Dom 加上 v-copy 及復制的文本即可
  例子：<button v-copy="copyText">一鍵復制</button>
*/
export default {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值為空的時候，給出提示。可根據項目UI仔細設計
        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 的值賦給 textarea 標簽的 value 屬性
      textarea.value = el.$value
      // 將 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 選中值並復制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('復制成功') // 可根據項目UI仔細設計
      }
      document.body.removeChild(textarea)
    }
    // 綁定點擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當傳進來的值更新的時候觸發
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

2、v-debounce

/*
  需求：防止按鈕在短時間內被多次點擊，使用防抖函數限制規定時間內只能點擊一次。

  思路：
    1、第一次點擊，立即調用方法並禁用按鈕，等延遲結束再次激活按鈕
    2、將需要觸發的方法綁定在指令上
  
  使用：給 Dom 加上 v-debounce 及回調函數即可
  <button v-debounce="debounceClick">防抖提交</button>
*/
export default {
  inserted: function (el, binding) {
    let timer
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      if (!el.disabled) {
        el.disabled = true;
        binding.value();
        timer = setTimeout(() => {
          el.disabled = false
        }, 1000)
      }
    })
  },
}

3、v-longPress

/*
  需求：實現長按，用戶需要按下並按住按鈕幾秒鍾，觸發相應的事件
  思路：
    1、創建一個計時器， 2 秒后執行函數
    2、當用戶按下按鈕時觸發 mousedown 事件，啟動計時器；用戶松開按鈕時調用 mouseout 事件。
    3、如果 mouseup 事件 2 秒內被觸發，就清除計時器，當作一個普通的點擊事件
    4、如果計時器沒有在 2 秒內清除，則判定為一次長按，可以執行關聯的函數。
    5、在移動端要考慮 touchstart，touchend 事件
  使用：<button v-longpress="longpress">長按</button>
*/

export default {
  bind: function (el, binding) {
    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)
  }
}

4、v-inputNumber

/*
  需求：根據正則表達式，設計自定義處理表單輸入規則的指令,這里只能輸入正整數
  
  使用：將需要校驗的輸入框加上 v-inputNumber 即可
   <input type="text" v-model="note" v-inputNumber />
*/
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)
}
export default {
  bind: function (el, binding, vnode) {
    // 正則規則可根據需求自定義
    var regRule = /[^0-9]/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)
  }
}

5、v-waterMarker

/*
  需求：給整個頁面添加背景水印。

  思路：
    1、使用 canvas 特性生成 base64 格式的圖片文件，設置其字體大小，顏色等。
    2、將其設置為背景圖片，從而實現頁面或組件水印效果
  
  使用：設置水印文案，顏色，字體大小即可
  <div v-waterMarker="{text:'版權所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
*/

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') + ')'
}

export default {
  bind: function (el, binding) {
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
  }
}

6、v-draggable

/*
  需求：實現一個拖拽指令，可在父元素區域任意拖拽元素。

  思路：
    1、設置需要拖拽的元素為absolute，其父元素為relative。
    2、鼠標按下(onmousedown)時記錄目標元素當前的 left 和 top 值。
    3、鼠標移動(onmousemove)時計算每次移動的橫向距離和縱向距離的變化值，並改變元素的 left 和 top 值
    4、鼠標松開(onmouseup)時完成一次拖拽
  
  使用：在 Dom 上加上 v-draggable 即可
  <div class="dialog-model" v-draggable></div>
*/
export default {
  inserted: function (el) {
    el.style.cursor = 'move';
    el.style.position="absolute";
    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 = parseInt(window.getComputedStyle(el.parentNode).width) - parseInt(window.getComputedStyle(el).width)
        let maxY = parseInt(window.getComputedStyle(el.parentNode).height) - 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
      }
    }
  }
}