vue中有哪些自定義指令

這篇文章主要介紹“vue中有哪些自定義指令”，在日常操作中，相信很多人在vue中有哪些自定義指令問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中有哪些自定義指令”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

四個(gè)實(shí)用的vue自定義指令

1、v-drag

需求：鼠標(biāo)拖動元素

思路：

• 元素偏移量 = 鼠標(biāo)滑動后的坐標(biāo) - 鼠標(biāo)初始點(diǎn)擊元素時(shí)的坐標(biāo) + 初始點(diǎn)擊時(shí)元素距離可視區(qū)域的top、left。

• 將可視區(qū)域作為邊界，限制在可視區(qū)域里面拖拽。

代碼：

Vue.directive('drag', {
  inserted(el) {
    let header = el.querySelector('.dialog_header')
    header.style.cssText += ';cursor:move;'
    header.onmousedown = function (e) {
      //獲取當(dāng)前可視區(qū)域?qū)?、?
      let clientWidth = document.documentElement.clientWidth
      let clientHeight = document.documentElement.clientHeight

      //獲取自身寬高
      let elWidth = el.getBoundingClientRect().width
      let elHeight = el.getBoundingClientRect().height

      //獲取當(dāng)前距離可視區(qū)域的top、left
      let elTop = el.getBoundingClientRect().top
      let elLeft = el.getBoundingClientRect().left

      //獲取點(diǎn)擊時(shí)候的坐標(biāo)
      let startX = e.pageX
      let startY = e.pageY

      document.onmousemove = function (e) {
        //元素偏移量 = 鼠標(biāo)滑動后的坐標(biāo) - 鼠標(biāo)初始點(diǎn)擊元素時(shí)的坐標(biāo) + 初始點(diǎn)擊時(shí)元素距離可視區(qū)域的top、left
        let moveX = e.pageX - startX + elLeft
        let moveY = e.pageY - startY + elTop

        //將可視區(qū)域作為邊界，限制在可視區(qū)域里面拖拽
        if ((moveX + elWidth) > clientWidth || moveX < 0 || (moveY + elHeight) > clientHeight || moveY < 0) {
          return
        }

        el.style.cssText += 'top:' + moveY + 'px;left:' + moveX + 'px;'
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

2、v-wordlimit

需求：后臺字段限制了長度，并且區(qū)分中英文，中文兩個(gè)字節(jié)，英文一個(gè)字節(jié)；所以輸入框需要限制輸入的字?jǐn)?shù)并且區(qū)分字節(jié)數(shù)，且需回顯已輸入的字?jǐn)?shù)。

思路：

• 一個(gè)字節(jié)的正則/[\x00-\xff]/g

• 創(chuàng)建包裹字?jǐn)?shù)限制的元素，并定位布局在textarea和input框上

• 分別計(jì)算輸入的字符一個(gè)字節(jié)的有enLen個(gè)，兩個(gè)字節(jié)的有cnLen個(gè)；用來后面字符串截?cái)嗵幚?/p>

• 當(dāng)輸入的字?jǐn)?shù)超過限定的字?jǐn)?shù)，截?cái)嗵幚?；substr(0,enLen+cnLen)

• 接口更新了輸入框的值，或者初始化輸入框的值，需要回顯正確的字節(jié)數(shù)

代碼：

Vue.directive('wordlimit',{
  bind(el,binding){
    console.log('bind');
    let { value } = binding
    Vue.nextTick(() =>{
      //找到輸入框是textarea框還是input框
      let current = 0
      let arr = Array.prototype.slice.call(el.children)
      for (let i = 0; i < arr.length; i++) {
        if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
          current = i
        }
      }
  
      //更新當(dāng)前輸入框的字節(jié)數(shù)
      el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
    })
  },
  update(el,binding){
    console.log('update');
    let { value } = binding
    Vue.nextTick(() =>{
      //找到輸入框是textarea框還是input框
      let current = 0
      let arr = Array.prototype.slice.call(el.children)
      for (let i = 0; i < arr.length; i++) {
        if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
          current = i
        }
      }
  
      //更新當(dāng)前輸入框的字節(jié)數(shù)
      el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
    })
  },
  inserted(el,binding){
    console.log('inserted');
    let { value } = binding

    //找到輸入框是textarea框還是input框
    let current = 0
    let arr = Array.prototype.slice.call(el.children)
    for (let i = 0; i < arr.length; i++) {
      if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
        current = i
      }
    }

    //創(chuàng)建包裹字?jǐn)?shù)限制的元素，并定位布局在textarea和input框上
    let div = document.createElement('div')
    if(el.children[current].tagName=='TEXTAREA'){//是textarea，定位在右下角
      div.style = 'color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;'
    }else{
      let styStr = ''
      if(!el.classList.contains('is-disabled')){//input框不是置灰的狀態(tài)則添加背景顏色
        styStr = 'background:#fff;'
      }
      div.style = 'color:#909399;position:absolute;font-size:12px;bottom:2px;right:10px;line-height:28px;height:28px;'+styStr
    }

    div.innerHTML = '0/'+ value
    el.appendChild(div)
    el.children[current].style.paddingRight = '60px'

    el.oninput = () =>{
      let val = el.children[current].value
      val = val.replace(/[^\x00-\xff]/g,'**') //eslint-disable-line
      // 字?jǐn)?shù)限制的盒子插入到el后是最后一個(gè)元素
      el.children[el.children.length-1].innerHTML = val.length + '/' + value
      if(val.length>value){
        let cnLen = 0 //一個(gè)字節(jié)的字?jǐn)?shù)
        let enLen = 0 //兩個(gè)字節(jié)的字?jǐn)?shù)

        if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
          enLen = val.match(/[^**]/g).length // 計(jì)算一個(gè)字節(jié)的字?jǐn)?shù)

          //一個(gè)字節(jié)兩個(gè)字節(jié)都有的情況
          if((value - val.match(/[^**]/g).length)>0){
            cnLen = Math.floor((value - val.match(/[^**]/g).length)/2)
          }else{
            cnLen = 0
          }
        }else{ //全部兩個(gè)字節(jié)的情況
          enLen = 0
          cnLen = Math.floor(value/2)
        }

        if(enLen>value){
          enLen = value
        }

        //超過限定字節(jié)數(shù)則截取
        el.children[current].value = el.children[current].value.substr(0,enLen+cnLen)

        //更新當(dāng)前輸入框的字節(jié)數(shù)
        el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line

      }
    }

  },
})

使用：

<el-input type="textarea" rows="3" v-wordlimit="20" v-model="value"></el-input>

3、v-anthor

需求：點(diǎn)擊某個(gè)元素（通常是標(biāo)題、副標(biāo)題之類的），動畫滾動到對應(yīng)的內(nèi)容塊

思路：

• 定時(shí)器使用window.scrollBy

• 不考慮ie的話，可直接使用  window.scrollBy({ top: ,left:0,behavior:'smooth' })

代碼：

Vue.directive('anchor',{
  inserted(el,binding){
    let { value } = binding
    let timer = null
    el.addEventListener('click',function(){
      // 當(dāng)前元素距離可視區(qū)域頂部的距離
      let currentTop = el.getBoundingClientRect().top
      animateScroll(currentTop)
    },false)
    
    function animateScroll(currentTop){
      if(timer){
        clearInterval(timer)
      }
      let c = 9
      timer = setInterval(() =>{
        if(c==0){
          clearInterval(timer)
        }
        c--
        window.scrollBy(0,(currentTop-value)/10)
      },16.7)
    }

  }
})

使用：

<div class="box" v-anchor="20" style="color:red;">是的</div>

4、v-hasRole

需求：根據(jù)系統(tǒng)角色添加或刪除相應(yīng)元素

代碼：

Vue.directive('hasRole',{
  inserted(el,binding){
    let { value } = binding
    let roles = JSON.parse(sessionStorage.getItem('userInfo')).roleIds

    if(value && value instanceof Array && value.length>0){

      let hasPermission = value.includes(roles)

      if(!hasPermission){
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
      throw new Error(`請檢查指令綁定的表達(dá)式，正確格式例如 v-hasRole="['admin','reviewer']"`)
    }
  }
})

到此，關(guān)于“vue中有哪些自定義指令”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！