Problem mit der V-HTML-Rendering-Komponente

Problem mit der V-HTML-Rendering-Komponente

Da ich bereits HTML analysiert habe, möchte ich heute Vue Drag & Drop verwenden, um eine automatische Codegenerierung ähnlich der von Kuai Station zu erreichen. Infolgedessen stieß ich auf das Problem, dass die Drag-Komponente in der Vergangenheit nicht analysiert werden konnte, da Vues v-html nur HTML analysieren kann, um XSS-Angriffe zu verhindern.

Ideen

Implementieren Sie zunächst eine einfache Seite, die in drei Teile unterteilt ist: links, Mitte und rechts. Die linke Seite ist die Komponente, die gezogen werden muss, die Mitte wird für die Anordnung und Anzeige der Komponenten verwendet und die rechte Seite ist der analysierte Code

Stücklistencode links

  <div ref="Test" >
    <one-component :title="Titel[0]" element="<el-radio v-model='radio' label='1'>Alternative Optionen</el-radio>"> 
      <el-radio slot="Komponente" v-model="radio" label="1">Optionen</el-radio>
    </ein-Komponente>
  </div>
</Vorlage>

<Skript>
importiere OneComponent aus '../components/oneComponent'
Standard exportieren {
  Name: '',
  Daten() {
    zurückkehren {
        Radio: '2',
        Titel: ['Radio-Einzel-Kontrollkästchen']
    }
  },
  Komponenten: {
    EinKomponenten
  },
 

}
</Skript>

<style lang="Stylus" scoped>
</Stil>

Anzeigecode für Zwischenkomponenten

  <div Klasse="alle">
    <el-form label-width="80px" label-position="links" :model="ruleForm" :rules="Regeln">
      <el-form-item label="simulierte Breite" prop="inputW">
        <el-input v-model="ruleForm.inputW" placeholder="Bitte Breite eingeben"></el-input>
      </el-form-item>
      <el-form-item label="Simulationshöhe" prop="inputH">
        <el-input v-model="ruleForm.inputH" placeholder="Bitte geben Sie die Körpergröße ein"></el-input>
      </el-form-item>
    </el-form>
    <Variablenbox
      Klasse="Box"
      :width="regelForm.inputW"
      :Höhe="regelForm.inputH"
    ></Variablebox>
  </div>
</Vorlage>
<Skript>
importiere Variablebox aus "../components/Variablebox";
Standard exportieren {
  Name: "",
  Daten() {
    var checkSize = (Regel, Wert, Rückruf) => {
      konsole.log(Wert);
      wenn (Wert < 500 || Wert > 1000) {
        callback(new Error("Eine Zahl zwischen 500 und 1000 wird empfohlen"));
      } sonst wenn (!Zahl.istInteger(Zahl(Wert))) {
        callback(new Error("Bitte geben Sie einen numerischen Wert ein"));
      } anders {
        Rückruf();
      }
    };
    zurückkehren {


      RegelForm: {
        EingangW: 500,
        EingabeH: 500
      },

      Regeln:
        inputW: [{ validator: checkSize, trigger: "unschärfe" }],
        inputH: [{ validator: checkSize, trigger: "unschärfe" }]
      }
    };
  },
  Methoden: {
  },
  Komponenten:
    Variablenbox
  }
};
</Skript>
<style lang="Stylus" scoped>
.alle
  Polsterung: 0 20px
  Anzeige: Flex
  Flexrichtung: Spalte
</Stil>

Als nächstes implementieren wir das Ziehen von Komponenten per Drag & Drop, um die Komponenten auf der Variablebox-Seite anzuzeigen. Nachdem die Verwendung von v-html fehlgeschlagen war, suchte ich auf Baidu und fand heraus, dass es grundsätzlich mit vue.Vue.compile( template ) und render aufgerufen wurde, aber es gab kein Beispiel.

compile kompiliert einen Template-String in eine Render-Funktion, was bedeutet, dass render am Ende createElement aufruft und in HTML konvertiert, wir rendern aber direkt
</el-radio slot="Komponente" v-model="Radio" label="1"/>
Ich persönlich habe also das Gefühl, dass es nicht funktioniert, und schließlich kann ich nur versuchen, eine neue Komponente zu erstellen und sie dann zu mounten

   neuer Vue({
        // el: '#app'
        Vorlage: this.ele,
         Daten:{
           Radio: '2'
        },
      }).$mount("#apps");

Dadurch wird das Problem vorübergehend gelöst.

Verwenden von v-html zum Rendern von Tags in Vue

Holen Sie sich die Hintergrunddaten mit Beschriftungsinhalt, die zur Anzeige auf der Seite gerendert werden müssen. Der Endeffekt ist wie folgt: Grafik- und Textlayout

1. Holen Sie sich zuerst die Daten und verarbeiten Sie sie separat

2. Dann geben Sie es in HTML aus

Das könnte Sie auch interessieren:
  • Lösung für die Unfähigkeit, den Stil des von Vue gerenderten Rich-Texts durch V-HTML-Anweisungen zu ändern
  • Verwenden Sie v-html, um das Problem zu lösen, dass HTML-Tags beim Rendern in Vue.js nicht analysiert werden

<<:  MySQL-Benutzerdefinierte Funktion zum Bestimmen, ob es sich um einen positiven Ganzzahl-Beispielcode handelt

>>:  So deinstallieren Sie IIS7-Web- und FTP-Dienste in Win7 vollständig

Artikel empfehlen

Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7

1. Herunterladen Laden Sie mysql-5.7.19-linux-gli...

So erstellen, speichern und laden Sie Docker-Images

Es gibt drei Möglichkeiten, ein Image zu erstelle...

Vue ruft die Computerkamera auf, um die Fotofunktion zu realisieren

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der MySQL-Halbsynchronisierung

Inhaltsverzeichnis Vorwort MySQL Master-Slave-Rep...

JavaScript implementiert das Topfschlagen-Spiel von Gray Wolf

1. Projektdokumente 2. Verwenden Sie HTML und CSS...

Was ist dies in einer Punkt-für-Punkt-Reihe von JavaScript?

Verstehe das Vielleicht haben Sie this in anderen...

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...

Grundlegende Kenntnisse zur MySQL-Wurmreplikation

Würmer replizieren sich, wie der Name schon sagt,...

50 superpraktische Tools für Webdesigner

Webdesigner zu sein ist nicht einfach. Sie müssen...

Einige Erkenntnisse und Gedanken zu iframe

Diese Geschichte beginnt heute mit einer unerwarte...