Closed macanfa108 closed 4 years ago
新功能描述 拜读大概源码后,尝试以下方式:(有更合适的方式可替代)
可新增配置项(如:'lineWrap': Boolean) 有配置lineWrap为true的保留空白div作为换行符,否则过滤空白div(不影响其他场景)
业务处调用方式: <jyf-parser ref="textModule" :line-wrap="true"></jyf-parser>
<jyf-parser ref="textModule" :line-wrap="true"></jyf-parser>
jyf-parser.vue: props: { // 保留空div为换行符 'lineWrap': Boolean }
props: { // 保留空div为换行符 'lineWrap': Boolean }
MpHtmlParser.js: constructor(data, options = {}) { this.lineWrap = options.lineWrap; }
constructor(data, options = {}) { this.lineWrap = options.lineWrap; }
// 自动压缩 if (node.name == 'div' && !Object.keys(attrs).length) { var siblings = this.siblings(); if (!(node.children || []).length && this.lineWrap) node.name = 'br'; else if (!(node.children || []).length) siblings.pop(); else if (node.children.length == 1 && node.children[0].name == 'div') siblings[siblings.length - 1] = node.children[0]; }
附图:
应用场景 场景:保留空白div作为换行符 之前应用的是wxParse,空白的div也会成为换行符来实现排版效果 但jyf-parser会直接过滤掉空白的div
排版源码: `
`
之前没考虑到空 div 可以拿来换行,就直接去掉了,这样的话确实是有问题的
div
目前把自动去除空 div 的功能 去掉了(感觉没必要为此加一个属性哈哈哈)
新功能描述
拜读大概源码后,尝试以下方式:(有更合适的方式可替代)
可新增配置项(如:'lineWrap': Boolean) 有配置lineWrap为true的保留空白div作为换行符,否则过滤空白div(不影响其他场景)
业务处调用方式:
<jyf-parser ref="textModule" :line-wrap="true"></jyf-parser>
jyf-parser.vue:
props: { // 保留空div为换行符 'lineWrap': Boolean }
MpHtmlParser.js:
constructor(data, options = {}) { this.lineWrap = options.lineWrap; }
// 自动压缩 if (node.name == 'div' && !Object.keys(attrs).length) { var siblings = this.siblings(); if (!(node.children || []).length && this.lineWrap) node.name = 'br'; else if (!(node.children || []).length) siblings.pop(); else if (node.children.length == 1 && node.children[0].name == 'div') siblings[siblings.length - 1] = node.children[0]; }
附图:
应用场景
场景:保留空白div作为换行符 之前应用的是wxParse,空白的div也会成为换行符来实现排版效果 但jyf-parser会直接过滤掉空白的div
排版源码: `
`