Vue implementiert die Anforderung des Ziehens und Ablegens dynamisch generierter Komponenten

/* generateComponents.js Dateiname */

importiere Vue von „vue“;

// Wenn Sie Komponenten dynamisch generieren möchten, importieren Sie zuerst diese Datei.
importiere Komponenten1 aus "./components/TestCom1.vue";
importiere Komponenten2 aus "./components/TestCom2.vue";

// Erstelle eine entsprechende Map zwischen dem Komponentennamen und der Komponente
const comMap = {
  Komponenten1,
  Komponenten2,
};

// Erhalten Sie den Komponentennamen, der zum Generieren der Komponente erforderlich ist, sowie die // Eigenschaften und Ereignisse, die Sie an die Komponente übergeben möchten const ReturnNewCom = function ({ props, on }) {
  Konstante {
    comItem: { name },
  } = Requisiten;
  const neueKomponente = Vue.extend({
    rendern(Element erstellen) {
      // Verwenden Sie den übergebenen Komponentennamen, um zu entscheiden, welche Komponente gerendert werden soll.
      returniere Element erstellen(comMap[Name], {
        Requisiten,
        An,
      });
    },
  });
  gibt eine neue neue Komponente zurück();
};

Standardmäßig ReturnNewCom exportieren;

/*Komponenten1.vue*/
<Vorlage>
  <div Klasse="Widget-Wrapper">
    <header class="header">{{ comDetail.name }}--{{ comDetail.id }}</header>
    <h1>Abfragebedingung: {{ queryObj }}</h1>
    <button @click="handleDelete">Löschen</button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      comDetail: this.comItem,
      _queryObj: dieses.queryObj,
    };
  },
  Requisiten: {
    comItem: {
      Typ: Objekt,
      Standard() {
        zurückkehren {
          ID: 0,
          Name: "",
        };
      },
    },
    Abfrageobjekt: {
      //Kann die von der übergeordneten Komponente übergebenen Auswahlbedingungen empfangen, muss ein Objekt sein
      Typ: Objekt,
      Standard() {
        // Definieren Sie die Standardabfragebedingungen.
        zurückkehren {
          Zahl: 0,
        };
      },
    },
  },
  betrachten:
    comItem(Wert) {
      this.comDetail = Wert;
      Rückgabewert;
    },
    Abfrageobjekt(Wert) {
      this._queryObj = Wert;
      Rückgabewert;
    },
  },
  erstellt() {
    console.log("Daten -> dieses.comElement", dieses.comElement);
  },
  Methoden: {
    handleDelete() {
      //Komponentenmethode löschen this.$el.remove();
      // Rufen Sie die Funktion der übergeordneten Komponente auf. Ändern Sie die Daten des leftComList-Arrays in der übergeordneten Komponente.
      dies.$emit("handleDelete", this.comDetail);
    },
  },
};
</Skript>
<Stilbereich>
.widget-wrapper {
  Hintergrund: #ff7b7b;
  Rahmenradius: 12px;
  Überlauf: versteckt;
  Breite: 200px;
}
.header {
  Höhe: 50px;
  Polsterung: 0 15px;
}
</Stil>

/* App.vue */
<Vorlage>
  <div Klasse="dragCom">
    <h1>{{ leftComList }}</h1>
    <button @click="queryObj.num++">Abfragebedingungen ändern</button>
    <div Klasse="Körper">
      <div Klasse="links">
        <draggable Klasse="links" :Liste="leftComList" :Gruppe="'Personen'">
          <div
            ref="comBody"
            v-for="({ Name, ID }, Index) in leftComList"
            :Schlüssel="id"
            Klasse="comCard"
          >
            <!-- Durchlaufen Sie das leftComList-Array und verwenden Sie die Daten zum Rendern von Komponenten. 
            Fügen Sie diesem DOM-Element das dynamisch generierte Array hinzu. -->
            {{
              handleAddCom({
                Requisiten: { comItem: { Name, ID }, queryObj },
                Index,
              })
            }}
          </div>
        </ziehbar>
      </div>
      <div Klasse="rechts">
        <ziehbar
          Klasse="DragArea"
          :list="rechteComList"
          :Gruppe="{ Name: 'Leute', Pull: 'Klon', Put: false }"
          :Klon="HandleKlonhund"
        >
          <div Klasse="Karte" v-for="Element in rightComList" :key="element.id">
            {{ element.name }}
          </div>
          <!-- Die Kartendaten auf der rechten Seite, der Name im Array-Objekt rightComList entspricht generateComponents.js
          Attribute in ComMap in -->
        </ziehbar>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
importiere ziehbares Objekt aus „vuedraggable“;
importiere CreateCom aus "./generateComponents";
Standard exportieren {
  Komponenten:
    ziehbar,
  },
  Daten() {
    zurückkehren {
      rechteComList: [
        {
          Ich würde: Math.random(),
          Name: "Komponenten1",
        },
        {
          Ich würde: Math.random(),
          Name: "Komponenten2",
        },
      ],
      leftComList: [], //Speichert Daten, die dynamisch generierte Komponenten steuern.
      comMap: new Map(), // Die Hauptfunktion besteht darin, aufzuzeichnen, ob die Komponente in das DOM der Klasse „comCard“ gerendert wird.
      // Nach dem Rendern können keine weiteren untergeordneten Elemente hinzugefügt werden.
      Abfrageobjekt: {
        // Die Hauptfunktion besteht darin, Abfragebedingungen an Unterkomponenten zu übergeben. Nummer: 0,
      },
    };
  },
  vorZerstören() {
    // Aufgezeichnete Daten löschen this.comMap.clear();
  },
  Methoden: {
    handleAddCom({ index, on = {}, props = { comItem: { name: "", id: 0 } } }) {
      Konstante {
        comItem: { id },
      } = Requisiten;
      dies.$nextTick(() => {
        // Länge der untergeordneten Knoten dieses Knotens abrufen const childNodesLength = this.$refs.comBody[index].childNodes.length;
        // Länge des DOM-Arrays comBody abrufen const comLine = this.$refs.comBody.length;
        wenn (!this.comMap.get(id)) {
          // Wenn die Komponente nicht gerendert wurde // 1. Rufen Sie die Methode CreateCom auf, um die Komponente zu erstellen. Und übergeben Sie Props und Events const com = CreateCom({
            Requisiten,
            An: {
              handleDelete: this.handleDeleteCom,
              ...An,
            },
          });
          // 2. Komponente com.$mount() generieren;
          wenn (childNodesLength === 2) {
            // Wenn Sie es zwischen zwei Komponenten hinzufügen möchten. Ändern Sie dann die DOM-Position der neu generierten Komponente und platzieren Sie sie in der Mitte.
            // Fügen Sie das endgültige Komponenten-DOM an der richtigen Stelle hinzu this.$refs.comBody.splice(
              Index,
              0,
              dies.$refs.comBody[comLine - 1]
            );
          }
          // 3. Fügen Sie die generierte Komponente zum DOM hinzu.
          dies.$refs.comBody[index].appendChild(com.$el);
          // 4. Notieren Sie, dass die Komponente Rendering implementiert.
          this.comMap.set(id, wahr);
        } anders {
          // Die Komponente an dieser Position wurde gerendert, kein erneutes Rendern nötig, einfach zurückkehren;
        }
      });
    },
    handleDeleteCom({ id }) {
      // Die an die untergeordnete Komponente übergebene Methode zum Löschen von Daten entsprechend der Komponenten-ID const index = this.leftComList.findIndex((item) => item.id === id);
      wenn (~index) {
        // Falls eine Komponente mit dieser ID existiert, löschen Sie sie this.leftComList.splice(index, 1);
      }
    },
    handleCloneDog(Artikel) {
      // Daten zum leftComList-Array hinzufügen return {
        ...Artikel,
        Ich würde: Math.random(),
      };
    },
  },
};
</Skript>

<Stil>
.dragCom {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
.Körper {
  Breite: 100 %;
  Höhe: 800px;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
}
.links {
  biegen: 1;
  Höhe: 800px;
  Rand: 1px durchgehend rosa;
}
.Rechts {
  Breite: 20 %;
  Höhe: 800px;
}
.Karte {
  Höhe: 50px;
  Hintergrundfarbe: #40cec7;
  Rand: 12px 0;
  Schriftgröße: 12px;
  Zeilenhöhe: 50px;
  Cursor: Zeiger;
}
.comCard {
  Rand: 12px;
  Anzeige: Inline-Block;
}
</Stil>