4 instructions personnalisées à connaître dans vue (partage pratique)

En plus des directives principales par défaut (v-model et v-show), Vue permet également l'enregistrement de directives personnalisées. Cet article partagera avec vous quatre instructions pratiques de personnalisation de vue. J'espère qu'il vous sera utile.

Quatre instructions pratiques pour personnaliser la 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

Exigences : éléments de déplacement de la souris

Idée :

• Décalage de l'élément = coordonnées après le glissement de la souris - coordonnées lorsque la souris clique initialement sur l'élément + haut et gauche de l'élément depuis la zone visible lors du premier clic.
• Utilisez la zone visible comme limite et limitez le glissement à l'intérieur de la zone visible. [Recommandations associées : "tutoriel vue.js
  "]

Code :

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🎜🎜🎜🎜Exigences : Le champ d'arrière-plan limite la longueur et fait la distinction entre le chinois et l'anglais, deux octets pour le chinois et un octet pour Anglais ; Par conséquent, la zone de saisie doit limiter le nombre de mots saisis et distinguer le nombre d'octets, et elle doit faire écho au nombre de mots saisis. 🎜🎜Idée : 🎜

• Régulier d'un octet /[x00-xff]/g
• Créer un élément qui enveloppe la limite de mots, puis le positionner et le disposer sur la zone de texte et la zone de saisie
• Calculez respectivement les caractères d'entrée pour un octet, enLen, et deux octets, cnLen ; utilisé pour le traitement ultérieur de troncature de chaîne
• Lorsque le nombre de mots d'entrée dépasse le nombre limité de mots, truncate Processing ; substr(0,enLen+cnLen)
• L'interface met à jour la valeur de la zone de saisie ou initialise la valeur de la zone de saisie et doit renvoyer le nombre correct d'octets

🎜code : 🎜rrreee🎜Utilisation : 🎜rrreee🎜🎜🎜3, 🎜🎜v-anthor🎜🎜🎜🎜Conditions requises : Cliquer sur un élément (généralement un titre, un sous-titre, etc. ), et l'animation défilera jusqu'au bloc de contenu correspondant 🎜🎜 Idée : 🎜

• Timer utilise window.scrollBy
• Si vous n'envisagez pas ie, vous pouvez directement utiliser window.scrollBy ({ top : ,left:0,behavior :'smooth' })

🎜Code : 🎜rrreee🎜Utilisation : 🎜rrreee🎜🎜🎜4, 🎜🎜v-hasRole🎜🎜🎜🎜Exigences : ajouter ou selon le rôle du système Supprimer l'élément correspondant 🎜🎜Code : 🎜rrreee🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!