Vue.js : 동적으로 생성 된 HTML에 범위가 지정된 CSS를 사용하려면 어떻게해야합니까?

Question

짧은 버전 :

내가 구성 요소의 방법에 HTML 문자열을 생성하고있어, 그것은 범위 지정에 대한 데이터 속성이 누락 있기 때문에 나는 범위 CSS와 HTML이 스타일을하는 방법을 알아낼 수 없습니다.

약간 더 긴 버전 :

나는 문자열을 받아하는 <span class="match">에 의해 포위하는 의미 강조 검색어의 모든 항목과 HTML 문자열을 반환 하이라이트라는 함수가 있습니다. 그러나이 문자열을 수동으로 처리하기 때문에 스팬은 내 Vue 구성 요소의 범위가 지정된 CSS가 작동해야하는 특수 데이터 특성을 얻지 못하므로이 스타일을 스타일 화하는 유일한 방법은 내 CSS를 만드는 것입니다 범위를 지정하지 않아도되고 싶지 않습니다. 이 작업을 수행하는 데 Vue 전용 방법이 더 있습니까? 기능은 다음과 같습니다

// 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 스타일로만 접근하는 방법을 잘 모르겠지만 CSS 모듈 (범위도 포함)을 사용하여 추가 <style> 요소로 해킹 할 수 있다고 생각합니다.

나는 같은 생각 : 당신의 당신이 할 수있는 기능을 대신에,

<style scoped> 
    ... 
</style> 

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

다음 :

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

현재 VUE 로더의 CSS 모듈 지원에 대한 자세한 읽을 수 있습니다 :

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

Answer 2

동적으로 생성 된 콘텐츠 v-html로 만든 DOM 콘텐츠는 범위가 지정된 스타일의 영향을받지 않지만 셀렉터를 사용하여 스타일을 지정할 수 있습니다.

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