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

Grundkenntnisse im Website-Design: Neulinge lesen bitte dies

Heutzutage beginnen viele Leute damit, Websites z...

Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx

Problembeschreibung Durch die Konfiguration von n...

jQuery Treeview-Baumstrukturanwendung

In diesem Artikelbeispiel wird der Anwendungscode...

Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells

In diesem Artikel wird der spezifische Prozess de...

Detailliertes Tutorial zur Installation von Prometheus mit Docker

Inhaltsverzeichnis 1. Node Exporter installieren ...

Detaillierte Erklärung der Anwendungsfälle von Vue-Listenern

Die erste Möglichkeit besteht darin, jQuery's...

Tutorial zur Nginx-Standortkonfiguration von Grund auf

Grundlagen Die Reihenfolge der Standortübereinsti...

CSS3 ändert den Bildlaufleistenstil des Browsers

Hinweis: Diese Methode ist nur auf WebKit-basiert...

So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden

· 【Szenenbeschreibung】 Nach HTTP1.1 unterstützt d...