Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue

//Instanziiert einen Befehl, aber dieser Befehl hat keinen Parameter `v-xxx`
 
// -- Übergeben Sie den Wert an die Anweisung `v-xxx="value"`  
 
// -- Übergeben Sie die Zeichenfolge an die Direktive, beispielsweise `v-html="'<p>Content</p>'"`
`v-xxx="'Zeichenfolge'"` 
 
// -- Übergeben Sie Parameter (`arg`), wie etwa `v-bind:class="className"`
`v-xxx:arg="Wert"` 
 
// -- Modifikatoren verwenden (`modifier`)
`v-xxx:arg.modifier="Wert"` 

// Registriere eine globale benutzerdefinierte Direktive `v-focus`
Vue.direktive('Fokus', {
  // Wenn das gebundene Element in das DOM eingefügt wird ...
  eingefügt: Funktion (el) {
    // Fokuselement el.focus() // Eine kleine Funktion, die das Eingabefeld automatisch fokussiert, nachdem die Seite geladen wurde}
})

Anweisungen: {
  Fokus:
    // Definition der Anweisung eingefügt: function (el) {
      el.focus() // Eine kleine Funktion, die das Eingabefeld automatisch fokussiert, nachdem die Seite geladen wurde}
  }
}

<Eingabe v-Fokus />

<div v-demo="{ color: 'white', text: 'hallo!' }"></div>
<Skript>
    Vue.Direktive('demo', Funktion (el, Bindung) {
    console.log(Bindung.Wert.Farbe) // "weiß"
    console.log(binding.value.text) // "Hallo!"
    })
</Skript>

// 1. Setze die benutzerdefinierte v-throttle-Direktive Vue.directive('throttle', {
  binden: (el, Bindung) => {
    let throttleTime = binding.value; // Anti-Shake-Zeitif (!throttleTime) { // Wenn der Benutzer die Anti-Shake-Zeit nicht einstellt, beträgt die Standardeinstellung 2 s
      Drosselzeit = 2000;
    }
    lass cbFun;
    el.addEventListener('klicken', event => {
      if (!cbFun) { // Erste Ausführung cbFun = setTimeout(() => {
          cbFun = null;
        }, Drosselzeit);
      } anders {
        Ereignis und Ereignis.stopImmediatePropagation();
      }
    }, WAHR);
  },
});
// 2. Legen Sie benutzerdefinierte v-throttle-Anweisungen für den Button-Tag <button @click="sayHello" v-throttle>Senden</button> fest.

const LazyLoad = {
    // Installationsmethode install(Vue,options){
       //Lade Bild statt Bild let defaultSrc = options.default;
        Vue.direktive('faul',{
            binden(el,Bindung){
                LazyLoad.init(el,Bindung.Wert,Standardquelle);
            },
            eingefügt(el){
                // Kompatibilitätsverarbeitung if('InterpObserver' in window){
                    LazyLoad.observe(el);
                }anders{
                    LazyLoad.listenerScroll(el);
                }
                
            },
        })
    },
    // Initialisierung init(el,val,def){
        // src speichert die echte Quelle
        el.setAttribute('src',val);
        // Quelle auf Laden des Bildes setzen el.setAttribute('src',def);
    },
    // Verwenden Sie InterpObserver, um el zu überwachen
    beobachten(el){
        let io = neuer InterpObserver(Einträge => {
            lass realSrc = el.dataset.src;
            wenn (Einträge[0].istSchnittpunkt) {
                wenn(realSrc){
                    el.src = realeQuelle;
                    el.removeAttribute('src');
                }
            }
        });
        io.observe(el);
    },
    // Auf Scroll-Ereignisse warten listenerScroll(el){
        : Lassen Sie den Handler = LazyLoad.throttle(LazyLoad.load,300);
        LazyLoad.load(el);
        window.addEventListener('scroll',() => {
            handler(el);
        });
    },
    // Lade das echte Bild load(el){
        let windowHeight = document.documentElement.clientHeight
        let elTop = el.getBoundingClientRect().top;
        let elBtm = el.getBoundingClientRect().bottom;
        lass realSrc = el.dataset.src;
        wenn(elTop - Fensterhöhe<0&&elBtm > 0){
            wenn(realSrc){
                el.src = realeQuelle;
                el.removeAttribute('src');
            }
        }
    },
    // Drosselung(fn,Verzögerung){
        lass den Timer; 
        lass vorherige Zeit;
        Rückgabefunktion (... args) {
            lassen Sie currTime = Date.now();
            lass Kontext = dies;
            wenn(!vorherigeZeit) vorherigeZeit = aktuelleZeit;
            Zeitüberschreitung löschen(Timer);
            
            if (aktuelleZeit - vorherigeZeit > Verzögerung) {
                vorherigeZeit = aktuelleZeit;
                fn.apply(Kontext,Argumente);
                Zeitüberschreitung löschen(Timer);
                zurückkehren;
            }
 
            Timer = setzeTimeout(Funktion(){
                vorherigeZeit = Date.now();
                Zeitgeber = null;
                fn.apply(Kontext,Argumente);
            },Verzögerung);
        }
    }
 
}
Standard-LazyLoad exportieren;

importiere { Message } von „Ant-Design-Vue“;
 
const vCopy = { //
  /*
    Die Bind-Hook-Funktion wird beim ersten Binden aufgerufen und kann zum Initialisieren der Einstellungen verwendet werden. el: das DOM-Objekt, auf das eingewirkt werden soll. value: der an die Anweisung übergebene Wert, d. h. der Wert, den wir kopieren möchten. */
  binden(el, { Wert }) {
    el.$value = value; // Verwenden Sie eine globale Eigenschaft, um den übergebenen Wert zu speichern, da dieser Wert in anderen Hook-Funktionen verwendet wird el.handler = () => {
      wenn (!el.$wert) {
      // Wenn der Wert leer ist, geben Sie eine Eingabeaufforderung ein. Die Eingabeaufforderung, die ich hier verwende, ist die Eingabeaufforderung von Ant-Design-Vue. Sie können sie nach Belieben verwenden. Message.warning('Kein kopierter Inhalt');
        zurückkehren;
      }
      // Textarea-Tag dynamisch erstellen const textarea = document.createElement('textarea');
      // Setzen Sie den Textbereich auf schreibgeschützt, um zu verhindern, dass die Tastatur unter iOS automatisch angezeigt wird, und verschieben Sie den Textbereich aus dem sichtbaren Bereich. textarea.readOnly = 'schreibgeschützt';
      Textbereich.Stil.Position = "absolut";
      Textbereich.Stil.links = '-9999px';
      // Weisen Sie dem Value-Attribut des Textarea-Tags den zu kopierenden Wert zu textarea.value = el.$value;
      //Textbereich in den Textkörper einfügen document.body.appendChild(textarea);
      //Wert auswählen und kopieren textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Kopieren');
      wenn (Ergebnis) {
        Message.success('Kopieren erfolgreich');
      }
      Dokument.Body.RemoveChild(Textbereich);
    };
    // Klickereignis binden, das sogenannte One-Click-Kopieren el.addEventListener('click', el.handler);
  },
  // Wenn der eingehende Wert aktualisiert wird, lösen Sie componentUpdated(el, { value }) { aus.
    el.$wert = Wert;
  },
  // Wenn die Anweisung vom Element gelöst ist, entferne die Ereignisbindung unbind(el) {
    el.removeEventListener('klicken', el.handler);
  },
};
 
Standard-vCopy exportieren;

<div ref="a" id="bg" v-ziehen></div>

  Anweisungen: {
    ziehen: {
      bind() {},
      eingefügt(el) {
        el.onmousedown = (e) => {
          lass x = e.clientX - el.offsetLeft;
          sei y = e.clientY - el.offsetTop;
          document.onmousemove = (e) => {
            sei xx = e.clientX – x + "px";
            sei yy = e.clientY – y + "px";
            el.style.left = xx;
            el.style.top = yy;
          };
          el.onmouseup = (e) => {
            Dokument.onmousemove = null;
          };
        };
      },
    },
  },