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

包含使用 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>

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

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

相关推荐
IT_陈寒29 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript