Welche Techniken gibt es für die Entwicklung von Vue-Komponenten?

Dieses Mal gebe ich Ihnen einige Tipps für die Entwicklung von Vue-Komponenten und welche Vorsichtsmaßnahmen für die Entwicklung von Vue-Komponenten gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Vue-Entwicklung einzelner Dateikomponenten

Wenn Sie vue-cli zum Initialisieren eines Projekts verwenden, finden Sie eine HelloWorld.vue-Datei im Ordner src/components. Dies ist der grundlegende Entwicklungsmodus für Einzeldateikomponenten.

// 注册
Vue.component('my-component', {
 template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
 el: '#example'
})

Beginnen Sie als Nächstes mit dem Schreiben einer Dialogkomponente.

Dialog

Der Grundstil der Zieldialogkomponente ist wie folgt:

Je nach Zielstil kann es wie folgt zusammengefasst werden:

1. Die Dialogkomponente benötigt eine titleprops, um den Titel des Popup-Fensters anzugeben

2. Die Dialogkomponente muss ein Bestätigungsereignis ausgeben, wenn die Schaltfläche „OK“ gedrückt wird (d. h. der übergeordneten Komponente mitteilen, dass die Bestätigung erfolgt ist). )

3. Ebenso muss die Dialogkomponente ein Abbruchereignis ausgeben

4. Die Dialogkomponente muss einen Slot bereitstellen, um benutzerdefinierte Inhalte zu ermöglichen

Dann ist die Kodierung wie folgt:

<template>
 <p class="ta-dialogwrapper">
 <p class="ta-dialog">
  <p class="ta-dialogheader">
  <span>{{ title }}</span>
  <i class="ios-close-empty" @click="handleCancel()"></i>
  </p>
  <p class="ta-dialogbody">
  <slot></slot>
  </p>
  <p class="ta-dialogfooter">
  <button @click="handleCancel()">取消</button>
  <button @click="handleOk()">确定</button>
  </p>
 </p>
 </p>
</template>
<script>
export default {
 name: 'Dialog',
 props: {
 title: {
  type: String,
  default: '标题'
 },
 },
 methods: {
 handleCancel() {
  this.$emit('cancel')
 },
 handleOk() {
  this.$emit('ok')
 },
 },
}
</script>

Damit ist die Entwicklung der Dialogkomponente abgeschlossen. Die Verwendungsmethode ist wie folgt:

<ta-dialog 
 title="弹窗标题" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是内容</p>
</ta-dialog>

Zu diesem Zeitpunkt habe ich ein Problem entdeckt, wenn ich v-if oder v-show zur Steuerung der Anzeige des Popup-Fensters verwende. Es gibt keine Animation! ! ! , sieht sehr steif aus. Trainer, ich möchte eine Animation hinzufügen. Zu diesem Zeitpunkt kommt die Übergangskomponente ins Spiel. Durch die Verwendung der Übergangskomponente in Kombination mit CSS können viele Animationen mit guten Effekten erstellt werden. Verbessern Sie als Nächstes die Animation der Dialogkomponente. Der Code lautet wie folgt:

<template>
 <transition name="slide-down">
 <p class="ta-dialogwrapper" v-if="isShow">
  // 省略
 </p>
 </transition>
</template>
<script>
export default {
 data() {
 return {
  isShow: true
 }
 },
 methods: {
 handleCancel() {
  this.isShow = false
  this.$emit('cancel')
 },
 handleOk() {
  this.isShow = true
  this.$emit('ok')
 },
 },
}
</script>

Sie können sehen, dass die Übergangskomponente einen Namen erhältprops, wie schreibe ich also CSS, um die Animation abzuschließen? Ganz einfach: Schreiben Sie einfach zwei
Schlüsselklassenstile (CSS-Klassenname):

.slide-down-enter-active {
 animation: dialog-enter ease .3s;
}
.slide-down-leave-active {
 animation: dialog-leave ease .5s;
}
@keyframes dialog-enter {
 from {
 opacity: 0;
 transform: translateY(-20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
@keyframes dialog-leave {
 from {
 opacity: 1;
 transform: translateY(0);
 }
 to {
 opacity: 0;
 transform: translateY(-20px);
 }
}

Es ist so einfach, einen guten Animationseffekt zu entwickeln. Beachten Sie, dass der Name der Übergangskomponente „Slide-Down“ lautet und der Schlüsselklassenname der geschriebenen Animation „Slide-Down-Enter-Active“ und „Slide-Down-Leave-Active“ lautet.

Dialog kapseln und MessageBox erstellen

Die Verwendung der MessageBox von Element ist wie folgt:

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '删除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消删除'
 });   
});

Als ich diesen Code sah, fühlte ich mich so magisch, so magisch, so erstaunlich (dreimal hintereinander). Schauen Sie genauer hin, diese Komponente ist eigentlich ein gekapselter Dialog,

Als nächstes werde ich auch eine solche Komponente kapseln. Sortieren wir zunächst unsere Gedanken:

1. Die Verwendungsmethode von Element ist diese.$confirm. Ist das nicht nur eine Frage der Verknüpfung mit Vues Prototyp?

2. Nachdem ich meine Gedanken sortiert hatte, begann ich mit dem Codieren:

An diesem Punkt fragen Sie sich vielleicht, wie man zurückruft. Tatsächlich habe ich einen gekapselten Dialog geschrieben und ihn MessageBox genannt. In seinem Code gibt es zwei Methoden:

import Vue from 'vue'
import MessgaeBox from './src/index'
const Ctur = Vue.extend(MessgaeBox)
let instance = null
const callback = action => {
 if (action === 'confirm') {
 if (instance.showInput) {
  instance.resolve({ value: instance.inputValue, action })
 } else {
  instance.resolve(action)
 }
 } else {
 instance.reject(action)
 }
 instance = null
}
const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => {
 const propsData = { tip, title, ...opts }
 instance = new Ctur({ propsData }).$mount()
 instance.reject = reject
 instance.resolve = resolve
 instance.callback = callback
 document.body.appendChild(instance.$el)
})
const confirm = (tip, title, opts) => showMessageBox(tip, title, opts)
Vue.prototype.$confirm = confirm

Richtig, Rückrufe werden beim Bestätigen und Stornieren durchgeführt. Ich möchte auch über Vue.extend sprechen, das MessageBox in den Code einführt,

Ich verwende new MessageBox nicht direkt, sondern new Ctur, da damit Daten (nicht nur Requisiten) definiert werden können, zum Beispiel:

onCancel() {
 this.visible = false
 this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
 this.visible = false
 this.callback && (this.callback.call(this, 'confirm'))
},

Zu diesem Zeitpunkt gibt es tatsächlich keine MessageBox auf der Seite. Wir müssen Folgendes ausführen:

Wenn Sie dies direkt tun, stellen Sie möglicherweise fest, dass beim Öffnen der MessageBox keine Animation erfolgt, beim Schließen jedoch eine Animation. Die Lösung ist auch sehr einfach: Machen Sie es beim

instance = new Ctur({ propsData }).$mount()

appendChild immer noch unsichtbar und verwenden Sie dann Code wie diesen:

document.body.appendChild(instance.$el)

Auf diese Weise wird es Animation geben.

Zusammenfassung

Vue.nextTick(() => instance.visible = true)

Erzielen Sie schöne Animationen durch Übergänge und CSS. Unter anderem bestimmt der Name der Übergangskomponente die beiden Schlüsselklassen zum Schreiben von CSS mit den Namen [name]-enter-active und [name]-leave-active

Erben Sie eine Komponente über Vue.extend
1. Konstruktor

   (Ich weiß nicht, wie ich es richtig ausdrücken soll, also sage ich es einfach so), und dann können Sie über diesen Konstruktor die zugehörigen Attribute der Komponente anpassen (Verwendungsszenario: js ruft die Komponente auf)

2. Wenn js eine Komponente aufruft, können Sie zuerst document.body.appendChild und dann Vue.nextTick(()) verwenden, um den Animationseffekt der Komponente aufrechtzuerhalten => Instanz.visible = true)

3. An dieser Stelle wird die einfache Vue-Komponentenentwicklung zusammengefasst. Der relevante Code, den ich geschrieben habe, befindet sich unter der Adresse

   https://

   github.com/mvpzx/elapse/tree/master/be/src/components

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie gehe ich mit Nullparametern in Post in Vue um?


Axios kann die Post-Anfrage springMVC nicht akzeptieren Umgang mit Parametern

Das obige ist der detaillierte Inhalt vonWelche Techniken gibt es für die Entwicklung von Vue-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!