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

Erste Schritte mit Front-End-Vue-Unit-Tests

Inhaltsverzeichnis 1. Warum brauchen wir Unit-Tes...

Detaillierter Prozess der Installation von nginx1.9.1 auf centos8

1.17.9 Wirklich leckerer Nginx-Download-Adresse: ...

Schritte zur Erstellung einer React Fiber-Struktur

Inhaltsverzeichnis React-Fasererstellung 1. Bevor...

Detaillierte Erklärung des JavaScript ES6-Moduls

Inhaltsverzeichnis 0. Was ist ein Modul 1.Modul l...

Detaillierter Prozess zum Konfigurieren eines HTTPS-Zertifikats unter Nginx

1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...

Farbabstimmungstechniken und Effektdarstellung für Beauty- und Styling-Websites

Farbe ist eines der wichtigsten Elemente jeder We...

Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden

Inhaltsverzeichnis 1. Was ist eine Komponente? 2....

Detailliertes Beispiel der CSS3-Boxschatteneigenschaft

CSS3 – Schatten hinzufügen (mithilfe von Boxschat...

Detaillierte Erläuterung der Fallstricke des Nginx-Proxy-Socket.io-Dienstes

Inhaltsverzeichnis Nginx fungiert als Proxy für z...