Erklärung und Beispielverwendung von 4 benutzerdefinierten Anweisungen in Vue

Vue.Direktive('ziehen', {
  eingefügt(el) {
    let header = el.querySelector('.dialog_header')
    header.style.cssText += ';cursor:bewegen;'
    header.onmousedown = Funktion (e) {
      //Breite und Höhe des aktuell sichtbaren Bereichs abrufen let clientWidth = document.documentElement.clientWidth
      let clientHeight = document.documentElement.clientHeight
 
      //Holen Sie sich die eigene Breite und Höhe let elWidth = el.getBoundingClientRect().width
      let elHeight = el.getBoundingClientRect().height
 
      //Holen Sie sich den oberen und linken sichtbaren Bereich der aktuellen Entfernung
      let elTop = el.getBoundingClientRect().top
      let elLeft = el.getBoundingClientRect().left
 
      //Beim Klicken die Koordinaten abrufen let startX = e.pageX
      let startY = e.pageY
 
      document.onmousemove = Funktion (e) {
        //Elementversatz = Koordinaten nach dem Gleiten der Maus - Koordinaten, wenn die Maus zum ersten Mal auf das Element klickt + oberer und linker Abstand des Elements vom sichtbaren Bereich beim ersten Klick
        let moveX = e.pageX - startX + elLeft
        let moveY = e.pageY - startY + elTop
 
        //Verwende den sichtbaren Bereich als Grenze und beschränke das Ziehen innerhalb des sichtbaren Bereichs, wenn ((moveX + elWidth) > clientWidth || moveX < 0 || (moveY + elHeight) > clientHeight || moveY < 0) {
          zurückkehren
        }
 
        el.style.cssText += 'oben:' + moveY + 'px;links:' + moveX + 'px;'
      }
      dokument.onmouseup = Funktion () {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

Vue.direktive('Wortgrenze',{
  binden(el,Bindung){
    console.log('binden');
    let { value } = Bindung
    Vue.nextTick(() => {
      //Finden Sie heraus, ob es sich bei dem Eingabefeld um ein Textbereichsfeld oder ein Eingabefeld handelt. let current = 0
      lass arr = Array.prototype.slice.call(el.children)
      für (sei i = 0; i < arr.length; i++) {
        wenn(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
          Strom = i
        }
      }
   
      //Aktualisiere die Anzahl der Bytes im aktuellen Eingabefeld el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
    })
  },
  aktualisieren(el,Bindung){
    Konsole.log('Aktualisieren');
    let { value } = Bindung
    Vue.nextTick(() => {
      //Finden Sie heraus, ob es sich bei dem Eingabefeld um ein Textbereichsfeld oder ein Eingabefeld handelt. let current = 0
      lass arr = Array.prototype.slice.call(el.children)
      für (sei i = 0; i < arr.length; i++) {
        wenn(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
          Strom = i
        }
      }
   
      //Aktualisiere die Anzahl der Bytes im aktuellen Eingabefeld el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
    })
  },
  eingefügt(el,Bindung){
    console.log('eingefügt');
    let { value } = Bindung
 
    //Finden Sie heraus, ob es sich bei dem Eingabefeld um ein Textbereichsfeld oder ein Eingabefeld handelt. let current = 0
    lass arr = Array.prototype.slice.call(el.children)
    für (sei i = 0; i < arr.length; i++) {
      wenn(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
        Strom = i
      }
    }
 
    //Erstellen Sie ein Element, das die Wortbegrenzung umschließt und es im Textbereich und im Eingabefeld positioniert. let div = document.createElement('div')
    if(el.children[current].tagName=='TEXTAREA'){//Es handelt sich um einen Textbereich, der in der unteren rechten Ecke positioniert ist.div.style = 'color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;'
    }anders{
      let styStr = ''
      if(!el.classList.contains('is-disabled')){//Wenn das Eingabefeld nicht ausgegraut ist, Hintergrundfarbe hinzufügen styStr = 'background:#fff;'
      }
      div.style = 'Farbe: #909399; Position: absolut; Schriftgröße: 12px; unten: 2px; rechts: 10px; Zeilenhöhe: 28px; Höhe: 28px;' + styStr
    }
 
    div.innerHTML = '0/' + Wert
    el.appendChild(div)
    el.children[current].style.paddingRight = "60px"
 
    el.oninput = () => {
      let val = el.children[aktuell].Wert
      val = val.replace(/[^\x00-\xff]/g,'**') //eslint-Deaktivierungszeile
      // Das Wortbegrenzungsfeld wird als letztes Element in el eingefügt el.children[el.children.length-1].innerHTML = val.length + '/' + value
      wenn(Wert.Länge>Wert){
        let cnLen = 0 //Anzahl der Ein-Byte-Wörter let enLen = 0 //Anzahl der Zwei-Byte-Wörter if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
          enLen = val.match(/[^**]/g).length // Berechne die Anzahl der Wörter in einem Byte // Ein Byte besteht aus beiden Bytes if((value - val.match(/[^**]/g).length)>0){
            cnLen = Math.floor((Wert - Wert.match(/[^**]/g).Länge)/2)
          }anders{
            cnLen = 0
          }
        }else{ //Für beide Bytes enLen = 0
          cnLen = Math.floor(Wert/2)
        }
 
        wenn(enLen>Wert){
          enLen = Wert
        }
 
        //Wenn die Anzahl der Bytes den Grenzwert überschreitet, fang el.children[current].value = el.children[current].value.substr(0,enLen+cnLen) ab.
 
        //Aktualisiere die Anzahl der Bytes im aktuellen Eingabefeld el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
 
      }
    }
 
  },
})

<el-input Typ="Textbereich" Zeilen="3" v-wordlimit="20" v-model="Wert"></el-input>

Vue.direktive('Anker',{
  eingefügt(el,Bindung){
    let { value } = Bindung
    let timer = null
    el.addEventListener('klicken',Funktion(){
      // Der Abstand zwischen dem aktuellen Element und der Oberseite des sichtbaren Bereichs let currentTop = el.getBoundingClientRect().top
      animateScroll(aktuell oben)
    },FALSCH)
     
    Funktion animateScroll(currentTop){
      wenn(Zeitgeber){
        Intervall löschen(Timer)
      }
      sei c = 9
      Timer = Intervall festlegen(() => {
        wenn(c==0){
          Intervall löschen(Timer)
        }
        C--
        window.scrollBy(0,(aktuellerTop-Wert)/10)
      },16.7)
    }
 
  }
})

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

Vue.direktive('hatRolle',{
  eingefügt(el,Bindung){
    let { value } = Bindung
    let-Rollen = JSON.parse(sessionStorage.getItem('userInfo')).roleIds
 
    wenn(Wert && Wertinstanz des Arrays && Wert.Länge>0){
 
      let hasPermission = value.includes(Rollen)
 
      wenn(!hasPermission){
        el.parentNode und el.parentNode.removeChild(el)
      }
    }anders{
      throw new Error(`Bitte überprüfen Sie den an die Anweisung gebundenen Ausdruck, das korrekte Format ist beispielsweise v-hasRole="['admin','reviewer']"`)
    }
  }
})