Vue.js: मैं गतिशील रूप से बनाए गए HTML उपयोग स्कोप्ड सीएसएस कैसे बना सकता हूं?

Question

लघु संस्करण:

मैं एक घटक की विधि में HTML के साथ एक स्ट्रिंग पैदा कर रहा हूँ, और मैं समझ नहीं scoped सीएसएस के साथ कि HTML शैली में है, क्योंकि यह तय करने के लिए डेटा विशेषता अनुपलब्ध है।

थोड़ा लंबा संस्करण:

मैं एक समारोह के मुख्य आकर्षण कहा जाता है जो एक स्ट्रिंग लेता है और एक खोज पद की सभी घटनाओं हाइलाइट, एक <span class="match"> से घिरा हुआ अर्थ के साथ एक HTML स्ट्रिंग रिटर्न दिया है। हालांकि, चूंकि मैं इसे मैन्युअल रूप से एक स्ट्रिंग में कर रहा हूं, उस अवधि को विशेष डेटा विशेषता नहीं मिलती है कि मेरे व्यू घटक में स्कॉप्ड सीएसएस को काम करने की ज़रूरत है, इसलिए मेरे लिए उन मैचों को स्टाइल करने का एकमात्र तरीका है मेरा सीएसएस बनाना scoped नहीं है, जो मैं नहीं करना चाहता। क्या ऐसा करने के लिए मेरे लिए एक और अधिक विशिष्ट तरीका है? समारोह इस तरह दिखता है:

// 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 सिर्फ एक समारोह है कि चीजों की आवश्यकता है कि बच गए होने के लिए निकल जाता है)!

Answer 1

यह एक दिलचस्प है।

यह सुनिश्चित नहीं है कि scoped शैलियों के साथ अकेले कैसे संपर्क करें, लेकिन मुझे लगता है कि हम सीएसएस मॉड्यूल (जो भी स्कॉप्ड हैं) का उपयोग कर अतिरिक्त <style> तत्व के साथ इसके आसपास हैक कर सकते हैं।

मैं की तरह सोच रहा था:,

<style scoped> 
    ... 
</style> 

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

फिर में अपने कार्य की जगह आप कर सकते हैं:

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

आप Vue-लोडर के सीएसएस मॉड्यूल समर्थन के बारे में अधिक पढ़ सकते हैं:

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

Answer 2

गतिशील रूप से जेनरेट की गई सामग्री v-html के साथ बनाई गई डोम सामग्री स्कॉप्ड शैलियों से प्रभावित नहीं है, लेकिन आप अभी भी गहरी चयनकर्ताओं का उपयोग करके उन्हें स्टाइल कर सकते हैं।

ऐसा करने का एक VueJS विशिष्ट तरीका प्रतीत नहीं होता है। ऐसा लगता है कि आपका सबसे अच्छा विकल्प आपके हाइलाइट फ़ंक्शन के आउटपुट में स्टाइल इनलाइन है या वैश्विक क्लास का उपयोग करना है।

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


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

या

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

तुम भी गहरी चयनकर्ताओं कोशिश कर सकते हैं, लेकिन मैं अपने आप को उन लोगों के साथ बहुत परिचित नहीं हूँ।

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