In diesem Artikel geht es um die Implementierung visueller Drag-and-Drop-Formulare (Codebeispiele) in Vue. Ich hoffe, dass er für Freunde hilfreich ist Du.
Implementieren Sie die visuelle Drag-and-Drop-Formularfunktion wie im Beispiel gezeigt. Die gesamte Seite ist in drei Spalten unterteilt: links, Mitte und rechts. Die Komponenten (Komponenten) der Komponentenbibliothek in der linken Spalte werden als Schlüssel verwendet. Beim Ziehen und Ablegen in den mittleren Bereich werden Array-Daten in Vuex gespeichert Einer wird nach dem Ziehen eines gedrückt. Wenn Sie auf eine Komponente klicken, werden ihre Eigenschaften in der rechten Spalte angezeigt. Tatsächlich werden die Dateniterationseigenschaften in den in vuex gespeicherten Daten gefunden.
Drei Spalten links, in der Mitte und rechts, links und rechts fixiert, adaptives Layout in der Mitte
Zuallererst sind die linken und rechten Spalten in Bezug auf das Layout dehnbar und die middle ist ein adaptives Layout.
Nach links bzw. nach rechts schweben, mit Rand die mittlere Spalte öffnen und das Layout vervollständigen
Das Browserfenster dynamisch zoomen, um den Effekt zu sehen
Dynamische Anzeigevorlage
Der zweite wichtige Punkt besteht darin, die Vorlage programmierbar zu machen.
Zum Beispiel: Wenn eine Zeichenfolge
Wichtige Punkte: Verwenden Sie js und vue extensions
Neues js erstellen
export default Vue.component('CustomTemplate', {
props: {
html: String
},
render (h) {
return h(Vue.extend({ // 关键点
template: `<div class="root-custom-template">${this.html}</div>`,
data () {
return {
current: ''
}
},
methods: {
doclick (uuid, id) {
this.current = uuid
this.$store.commit('EditPanel/changeId', uuid)
},
dodragstart (ev) {
ev.dropEffect = 'move'
}
}
}))
},
})Drag-and-Drop-Vorgang und Datenassemblierung
Es wurde analysiert bei Der nächste Schritt besteht darin, den gesamten Datenfluss mit Vuex zu implementieren.
Die Drag-and-Drop-Komponente verwendet vuedraggable. Achten Sie angesichts der Eigenschaften von MVVM darauf, dass sich die Daten nicht direkt ändern Ändern Sie den Status
rrreedie Flussrichtung der linken Spalte<--> Mittlere Anzeigespalte<----> Daten können geändert werden. Bitte beachten Sie:
computed: {
myList: {
get() {
return this.$store.state.myList
},
set(value) {
this.$store.commit('updateList', value)
}
}
}Dies wird 无意间 dazu führen, dass die Daten geändert werden, was schwierig ist 排查. Mit Object.freeze können Sie Objekte einfrieren, um Fehler zu vermeiden.
Object.freeze
var a = { k: 1 }
var b = a
b.k = 2
console.log(a) // { k: 2 }Dieser Artikel ist hier. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website !
Das obige ist der detaillierte Inhalt vonVue implementiert visuelle benutzerdefinierte Drag-and-Drop-Formulare (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
