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

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

쇼트 버전:

컴포넌트 메서드에서 HTML을 사용하여 문자열을 생성하고 있는데 범위 지정용 데이터 속성이 없기 때문에 범위 지정 CSS를 사용하여 HTML을 스타일링하는 방법을 알 수 없습니다.

약간 긴 버전:

하이라이트라고 하는 함수가 있습니다.이 함수는 문자열을 사용하여 검색어의 모든 항목이 하이라이트된 HTML 문자열을 반환합니다.즉, 이 함수는 에워싸여 있습니다.<span class="match">단, 이 작업은 문자열 내에서 수동으로 수행하므로 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_module은 회피해야 할 것을 회피하는 함수일 뿐입니다)

감사합니다!

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

비슷한 걸 우연히 만났어가장 쉬운 방법은 범위를 좁히지 않는 것입니다.마크업 클래스와 CSS 클래스의 이름만 지정하면 다른 모듈에서 상속되지 않고 완료됩니다.이것을 성공시키기 위해 자바스크립트를 만지작거리는 것은 과잉이다.

이것은 흥미로운 것입니다.

어떻게 접근해야 할지 모르겠다scoped스타일만 가지고는 할 수 있지만 다른 방법으로도 할 수 있을 것 같아요.<style>css 모듈을 사용하는 요소(스코프도 있습니다).

저는 이렇게 생각했어요.

<style scoped>
  ...
</style>

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

다음으로 치환 기능에서 다음을 수행할 수 있습니다.

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

vue-loader의 CSS 모듈 지원에 대한 자세한 내용은 여기를 참조하십시오.

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

좋은 질문입니다!나는 같은 문제를 안고 우아하게 해결했다.빨리 공유하고 싶다!

템플릿이 다음과 같이 생겼다고 가정합니다.

<template>
  <div class="match">
    <div v-html="<span>hello world</span>"></div>
  </div>
</template>

그냥 바꿔요

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

compiled output: `.match span[data-v-f3f3eg9] { color: yellow; }`

로.

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

compiled output: `.match[data-v-f3f3eg9] span { color: yellow; }`

두 출력의 차이를 확인합니다.무슨 말인지 아시겠죠?자세한 내용은 Vue Loader 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/43052364/vue-js-how-can-i-make-dynamically-created-html-use-scoped-css