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

Question

简短版本：

我在组件的方法中使用 HTML 生成一个字符串，但我不知道如何使用作用域 CSS 来设置该 HTML 的样式，因为它缺少作用域的 data 属性。

稍微长一点的版本：

我有一个名为highlight的函数，它接受一个字符串并返回一个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_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 类，这样它们就不会从其他模块继承，然后就完成了。乱用 JavaScript 来完成这个任务是大材小用。

Answer 3

这是一个有趣的事情。

不确定如何单独使用

scoped

样式来解决这个问题，但我认为我们可以使用 css 模块（也在范围内）通过额外的

<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

Answer 4

问得好！我遇到了同样的问题并以优雅的方式解决了它。迫不及待想分享！

假设你的模板看起来像这样

<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 文档的更多信息。

Answer 5

请参阅下面的链接，它解释了如何针对不同的 vue 版本以及带/不带 scss 来使用深度选择

https://github.com/vuejs/vue-loader/issues/749