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

花间半盘棋2024-02-06 13:31

包含使用 quill 解析富文本传过来的内容
方法1：使用全局过滤器：

html 复制代码

<div style="width: 100%;" class="ql-snow ql-editor" v-html="safeHtmlContent"></div>

js 复制代码

import Vue from 'vue'

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

js 复制代码

Vue.filter('formatter', function (value) {
  // 只给 p 标签加首行缩进的样式
  return value.replace(/<p>/g, '<p style="text-indent: 20px;">');
});

js 复制代码

// 和 data 平级的
computed: {
    safeHtmlContent() {
        // 在这里应用过滤器
        return this.$options.filters.formatter(this.articleInfo.articleContent);
    }
},

但是使用中有一个疑问，全局 Vue.filter可以用，但是 filters 却用不了，一直报错过滤器未定义，本来我以为是数据还没有获取到，查了一下，原因出在 v-html 上，因为vue2.0 以上的版本，不可以给 v-html 使用 filters，只可以在 v-bind 和插值表达式中使用，如果非要使用可以用这个方法：

html 复制代码

<div v-html="$options.filters.过滤器名(需要过滤的数据)"></div>

方法2

使用 filters 局部过滤器的写法，它和 data 平级：

html 复制代码

<div style="width: 100%;" class="ql-snow ql-editor" v-html="$options.filters.safeHtmlContent(this.articleInfo.content)"></div>

js 复制代码

filters:{
    safeHtmlContent(val){
        return val.replace(/<p>/g, '<p style="text-indent: 20px;">');
    }
},

方法2 的好处是：遇到一个页面有多种这样的情况也可以愉快的使用过滤器：

html 复制代码

<div style="width: 100%;" class="ql-snow ql-editor" v-html="isList[4].articleContent"></div>

可见全局过滤器比较灵活；

我的理解是：要过滤的东西是使用的时候确定而不是在过滤器里确定，适合多次使用，这样也就弄懂了全局过滤器和局部过滤器的区别，以前是只知其然而不知其所以然。