Vue.js: Wie kann ich dynamisch erstelltes HTML benutzen?

Question

Kurzversion:

Ich bin in einer Komponente Methode einen String mit HTML zu erzeugen, und ich kann nicht herausfinden, wie die HTML mit CSS scoped, um Stil, weil es das Datenattribut für Scoping fehlt.

Etwas längere Version:

Ich habe eine Funktion namens Highlight, das einen String und gibt einen HTML-Zeichenfolge mit allen Vorkommen eines Suchbegriffs markiert ist, von einem <span class="match"> umgeben Bedeutung hat. Da dies jedoch manuell in einer Zeichenfolge ausgeführt wird, erhält diese Spalte nicht das spezielle Datenattribut, das der bereichsspezifische CSS-Code in meiner Vue-Komponente benötigt. Daher besteht die einzige Möglichkeit für das Formatieren dieser Übereinstimmungen darin, mein CSS zu erstellen nicht beschränkt, was ich nicht tun möchte. Gibt es eine mehr Vue-spezifische Möglichkeit für mich, dies zu tun? Die Funktion sieht wie folgt aus:

// Source: http://stackoverflow.com/a/280805/2874789 
function highlight(data, search) { 
    return data.replace(
     new RegExp("(" + preg_quote(search) + ")", 'gi'), 
     "<span class=match>$1</span>" 
    ); 
} 

(preg_quote ist nur eine Funktion, die Dinge entkommt, die maskiert werden müssen)

Dank!

Answer 1

Dies ist ein interessanter.

Nicht sicher, wie man dies mit scoped Stile allein angeht, aber ich denke, wir können es mit einem zusätzlichen <style> Element mit css-Modulen (die auch im Bereich sind) hacken.

Ich dachte, wie:

<style scoped> 
    ... 
</style> 

<style module> 
    .match { 
    color: red; 
    } 
</style> 

Dann in Ihrer Funktion ersetzen Sie tun können:

`<span class="${this.$style.match}">...</span>` 

Sie können hier mehr über vue-Laders CSS Modulträger lesen:

http://vue-loader.vuejs.org/en/features/css-modules.html

Answer 2

Dynamisch generierter Inhalt DOM-Inhalt, der mit v-html erstellt wurde, ist nicht von betroffen, die von Bereichsdefinitionen betroffen sind. Sie können sie jedoch weiterhin mit tiefen Selektoren formatieren.

Es scheint keine VueJS-spezifische Vorgehensweise dafür zu geben. Es klingt, als wäre es am besten, entweder in der Ausgabe der Hervorhebungsfunktion inline zu stylen oder eine globale Klasse zu verwenden.

function highlight(data, search) { 
    return data.replace(
    new RegExp("(" + preg_quote(search) + ")", 'gi'), 
    "<span class=match>$1</span>" 
    ); 
} 


<style> 
    .match { 
    color: yellow; 
    } 
</style> 

oder

function highlight(data, search) { 
    return data.replace(
    new RegExp("(" + preg_quote(search) + ")", 'gi'), 
    "<span style="{ color: yellow }">$1</span>" 
    ); 
} 

Sie auch tief Selektoren versuchen können, aber ich bin nicht sehr vertraut mit ihnen selbst.

https://vue-loader.vuejs.org/en/features/scoped-css.html