【vue/过滤器】解析富文本返回的 html 中，单独给指定标签加样式

在Vue中，你可以创建一个全局过滤器来解析HTML字符串，并给指定的标签添加样式。以下是一个简单的例子，演示如何实现这一功能：

// 注册全局过滤器
Vue.filter('parseHtml', function(html, tag, className) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const elements = doc.querySelectorAll(tag);
  for (const element of elements) {
    element.classList.add(className);
  }
  return doc.documentElement.innerHTML;
});

在你的组件中，你可以这样使用这个过滤器：

<template>
  <div v-html="htmlContent | parseHtml('p', 'custom-paragraph')"></div>
</template>
 
<script>
export default {
  data() {
    return {
      htmlContent: '<p>这是一段文本</p><p>这是另一段文本</p>'
    };
  }
};
</script>
 
<style>
.custom-paragraph {
  color: blue;
  font-weight: bold;
}
</style>

在这个例子中，我们创建了一个名为parseHtml的过滤器，它接受三个参数：要解析的HTML字符串html，要添加样式的标签tag，以及要添加的类名className。过滤器将查找HTML中的指定标签，并给它们添加相应的类，从而应用样式。在v-html指令中使用这个过滤器，将处理后的HTML内容插入DOM中。