4 arahan tersuai yang patut diketahui dalam vue (perkongsian praktikal)

Selain arahan teras lalai ( v-model dan v-show ), Vue juga membenarkan pendaftaran arahan tersuai. Artikel ini akan berkongsi dengan anda empat arahan tersuai vue praktikal, saya harap ia akan membantu anda.

Empat arahan tersuai vue praktikal

1, v-dragGunakan kawasan yang boleh dilihat sebagai sempadan dan hadkan penyeretan dalam kawasan yang boleh dilihat. [Cadangan berkaitan: "

tutorial vue.js

"]

• Kod:
2 ,

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

Keperluan: Medan latar belakang mengehadkan panjang dan membezakan antara bahasa Cina dan Inggeris, dua bait untuk bahasa Cina dan satu bait untuk bahasa Inggeris jadi input kotak keperluan Hadkan bilangan perkataan yang dimasukkan dan bezakan bilangan bait, dan bergema bilangan perkataan yang dimasukkan. Idea: v-wordlimitSatu bait biasa/[x00-xff]/gBuat elemen yang membalut had perkataan dan letakkan susun atur dalam textarea dan input

pada kotak masing-masing mengira aksara input untuk satu bait, enLen dan dua bait, cnLen digunakan untuk pemprosesan pemotongan rentetan berikutnya

apabila bilangan aksara input melebihi had of words, truncation processing; substr(0,enLen cnLen)

Antara muka mengemas kini nilai kotak input atau memulakan nilai kotak input dan perlu menggemakan bilangan bait yang betul
• Kod:
• Gunakan:

3,

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>

Keperluan: Klik pada elemen (biasanya tajuk, sari kata, dll.), dan animasi akan menatal ke blok kandungan yang sepadan Idea: v-anthorPemasa menggunakan window.scrollByJika anda tidak menganggap IE, anda boleh terus menggunakan window.scrollBy({ top: ,left:0,behavior:'smooth' })

Kod:

Gunakan:

4,

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>

Keperluan: Tambah atau padam yang sepadan mengikut peranan sistem Elemen kod: v-hasRole Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan ! !

Atas ialah kandungan terperinci 4 arahan tersuai yang patut diketahui dalam vue (perkongsian praktikal). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!