Vue implementiert visuelle benutzerdefinierte Drag-and-Drop-Formulare (Codebeispiel)

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 button übergeben wird, wie wird sie als Komponente angezeigt? Schnuretikett? Wollstoff.

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

rrree

die 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!