vue에서 알아야 할 4가지 사용자 정의 지침(실용적인 공유)

Vue에서는 기본 핵심 지시문(v-model 및 v-show) 외에도 사용자 지정 지시문 등록도 허용합니다. 이 기사에서는 네 가지 실용적인 vue 사용자 정의 지침을 공유하겠습니다. 이것이 도움이 되기를 바랍니다.

네 가지 실용적인 vue 사용자 정의 지침

1, v-dragv-drag

需求：鼠标拖动元素

思路：

• 元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top、left。
• 将可视区域作为边界，限制在可视区域里面拖拽。【相关推荐：《vue.js教程》】

代码：

Vue.directive('drag', {
  inserted(el) {
    let header = el.querySelector('.dialog_header')
    header.style.cssText += ';cursor:move;'
    header.onmousedown = function (e) {
      //获取当前可视区域宽、高
      let clientWidth = document.documentElement.clientWidth
      let clientHeight = document.documentElement.clientHeight

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

      //获取当前距离可视区域的top、left
      let elTop = el.getBoundingClientRect().top
      let elLeft = el.getBoundingClientRect().left

      //获取点击时候的坐标
      let startX = e.pageX
      let startY = e.pageY

      document.onmousemove = function (e) {
        //元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top、left
        let moveX = e.pageX - startX + elLeft
        let moveY = e.pageY - startY + elTop

        //将可视区域作为边界，限制在可视区域里面拖拽
        if ((moveX + elWidth) > clientWidth || moveX < 0 || (moveY + elHeight) > clientHeight || moveY < 0) {
          return
        }

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

2、v-wordlimit

需求：后台字段限制了长度，并且区分中英文，中文两个字节，英文一个字节；所以输入框需要限制输入的字数并且区分字节数，且需回显已输入的字数。

思路：

• 一个字节的正则/[x00-xff]/g
• 创建包裹字数限制的元素，并定位布局在textarea和input框上
• 分别计算输入的字符一个字节的有enLen个，两个字节的有cnLen个；用来后面字符串截断处理
• 当输入的字数超过限定的字数，截断处理；substr(0,enLen+cnLen)
• 接口更新了输入框的值，或者初始化输入框的值，需要回显正确的字节数

代码：

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==&#39;TEXTAREA&#39; || arr[i].tagName==&#39;INPUT&#39;){
          current = i
        }
      }
  
      //更新当前输入框的字节数
      el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,&#39;**&#39;).length +&#39;/&#39;+value//eslint-disable-line
    })
  },
  update(el,binding){
    console.log(&#39;update&#39;);
    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==&#39;TEXTAREA&#39; || arr[i].tagName==&#39;INPUT&#39;){
          current = i
        }
      }
  
      //更新当前输入框的字节数
      el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,&#39;**&#39;).length +&#39;/&#39;+value//eslint-disable-line
    })
  },
  inserted(el,binding){
    console.log(&#39;inserted&#39;);
    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==&#39;TEXTAREA&#39; || arr[i].tagName==&#39;INPUT&#39;){
        current = i
      }
    }

    //创建包裹字数限制的元素，并定位布局在textarea和input框上
    let div = document.createElement(&#39;div&#39;)
    if(el.children[current].tagName==&#39;TEXTAREA&#39;){//是textarea，定位在右下角
      div.style = &#39;color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;&#39;
    }else{
      let styStr = &#39;&#39;
      if(!el.classList.contains(&#39;is-disabled&#39;)){//input框不是置灰的状态则添加背景颜色
        styStr = &#39;background:#fff;&#39;
      }
      div.style = &#39;color:#909399;position:absolute;font-size:12px;bottom:2px;right:10px;line-height:28px;height:28px;&#39;+styStr
    }

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

    el.oninput = () =>{
      let val = el.children[current].value
      val = val.replace(/[^\x00-\xff]/g,&#39;**&#39;) //eslint-disable-line
      // 字数限制的盒子插入到el后是最后一个元素
      el.children[el.children.length-1].innerHTML = val.length + &#39;/&#39; + value
      if(val.length>value){
        let cnLen = 0 //一个字节的字数
        let enLen = 0 //两个字节的字数

        if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
          enLen = val.match(/[^**]/g).length // 计算一个字节的字数

          //一个字节两个字节都有的情况
          if((value - val.match(/[^**]/g).length)>0){
            cnLen = Math.floor((value - val.match(/[^**]/g).length)/2)
          }else{
            cnLen = 0
          }
        }else{ //全部两个字节的情况
          enLen = 0
          cnLen = Math.floor(value/2)
        }

        if(enLen>value){
          enLen = value
        }

        //超过限定字节数则截取
        el.children[current].value = el.children[current].value.substr(0,enLen+cnLen)

        //更新当前输入框的字节数
        el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,&#39;**&#39;).length +&#39;/&#39;+value//eslint-disable-line

      }
    }

  },
})

使用：

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

3、v-anthor

需求：点击某个元素（通常是标题、副标题之类的），动画滚动到对应的内容块

思路：

• 定时器使用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(){
      // 当前元素距离可视区域顶部的距离
      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

요구 사항: 마우스 드래그 요소

아이디어:

• 요소 오프셋 = 마우스 슬라이드 이후의 좌표 - 마우스가 요소를 처음 클릭할 때의 좌표 + 처음 클릭했을 때 표시 영역에서 요소의 상단 및 왼쪽.
• 표시 영역을 경계로 사용하고 표시 영역 내에서 드래그를 제한합니다. [관련 권장 사항: "vue.js 튜토리얼"]

코드:

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(`请检查指令绑定的表达式，正确格式例如 v-hasRole="['admin','reviewer']"`)
    }
  }
})

🎜2, 🎜🎜v-wordlimit🎜🎜🎜🎜 요구 사항: 배경 필드는 길이를 제한하고 중국어와 영어를 구분합니다. 중국어는 2바이트, 중국어는 1바이트입니다. English ; 따라서 입력 상자는 입력되는 단어 수를 제한하고 바이트 수를 구별해야 하며 입력된 단어 수를 에코해야 합니다. 🎜🎜아이디어: 🎜

• 1바이트 일반 /[x00-xff]/g
• 단어 제한을 래핑하는 요소를 만들고 텍스트 영역과 입력 상자에 배치하고 레이아웃합니다.
• 이후 문자열 잘림 처리에 사용되는 1바이트 enLen 및 2바이트 cnLen에 대한 입력 문자를 각각 계산합니다.
• 입력 단어 수가 제한된 단어 수를 초과하는 경우, truncate 처리; substr(0,enLen+cnLen)
• 인터페이스는 입력 상자의 값을 업데이트하거나 입력 상자의 값을 초기화하며 올바른 바이트 수를 에코해야 합니다.

🎜code : 🎜rrreee🎜사용: 🎜rrreee🎜🎜🎜3, 🎜🎜v-anthor🎜🎜🎜🎜요구 사항: 요소(일반적으로 제목, 부제 등)를 클릭하세요. ), 애니메이션은 해당 콘텐츠 블록으로 스크롤됩니다. 🎜🎜 아이디어: 🎜

• 타이머는 window.scrollBy를 사용합니다.
• 즉, 고려하지 않으면 window.scrollBy를 직접 사용할 수 있습니다. ({ top: ,left:0,behavior:' smooth' })

🎜Code: 🎜rrreee🎜Use: 🎜rrreee🎜🎜🎜4, 🎜🎜v-hasRole🎜🎜🎜🎜요구사항: 시스템 역할에 따라 추가 또는 해당 요소 삭제 🎜🎜코드: 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 입문🎜을 방문하세요! ! 🎜

위 내용은 vue에서 알아야 할 4가지 사용자 정의 지침(실용적인 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!