Vue.js:如何使动态创建的HTML使用作用域的CSS？

Question

精简版:

我在组件的方法中使用HTML生成一个字符串,我无法弄清楚如何使用作用域CSS来设置HTML样式,因为它缺少作用域的数据属性.

版本略长:

我有一个名为highlight的函数,它接受一个字符串并返回一个HTML字符串,其中突出显示所有出现的搜索词,意思是用a包围<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_quote只是一个逃避需要转义的东西的函数)

谢谢!

Answer 1

动态生成的内容 使用 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

Answer 2

这是一件有趣的事。

不知道如何单独使用样式来解决这个问题，但我认为我们可以使用 css 模块（也在范围内）scoped通过附加元素来解决它。<style>

我当时想的是：

<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