uni-app nvue 中使用 rich-text 不支持设置行高
uni-app nvue 中使用 rich-text 不支持设置行高
Bug描述
【报Bug】nvue 中使用 rich-text 不支持设置行高,且属性名只支持驼峰写法,试过 lineHeight 和 line-height 都没有效果
示例代码
<rich-text :nodes="nodes"></rich-text>
const nodes = '<span style="lineHeight: 48rpx; fontSize: 24rpx;">哇!真的是你呀,哈哈哈,哎呀!只因你太美哇!真的是你呀,哈哈哈,哎呀!只因你太美哇!真的是你呀,哈哈哈,哎呀!只因你太美</span>'
操作步骤
<rich-text :nodes="nodes"></rich-text>
const nodes = '<span style="lineHeight: 48rpx; fontSize: 24rpx;">哇!真的是你呀,哈哈哈,哎呀!只因你太美哇!真的是你呀,哈哈哈,哎呀!只因你太美哇!真的是你呀,哈哈哈,哎呀!只因你太美</span>'
预期结果
能够设置行高
实际结果
设置行高无效
开发环境与版本信息
项目 | 详情 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | Windows 10 专业版 22H2(19045.4780) |
HBuilderX类型 | Alpha |
HBuilderX版本号 | 4.43 |
手机系统 | Android |
手机系统版本号 | Android 15 |
手机厂商 | 小米 |
手机机型 | 红米 K70 |
页面类型 | nvue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
2 回复
nvue 中不支持,参考文档
这种情况可以考虑使用 vue 渲染
在 uni-app
的 nvue
环境中,确实存在 rich-text
组件不支持直接设置行高(line-height)的问题。这是由于 nvue
基于原生渲染引擎(如 Weex),与基于 WebView 渲染的 vue
页面有所不同,因此在一些样式和功能上会有所限制。
为了解决这个问题,我们可以采用一些替代方案。一种常见的方法是通过自定义渲染来实现,即不使用 rich-text
组件,而是手动解析 HTML 内容并应用自定义样式。下面是一个简单的示例,演示如何在 nvue
中手动渲染带有自定义行高的富文本内容。
首先,我们需要一个函数来解析 HTML 并将其转换为可渲染的组件数组。这里我们假设 HTML 内容相对简单,只包含文本和段落标签(<p>
)。
// 解析HTML内容的函数
function parseHTML(html) {
let div = document.createElement('div');
div.innerHTML = html.trim();
let paragraphs = div.getElementsByTagName('p');
let result = [];
for (let i = 0; i < paragraphs.length; i++) {
result.push({
type: 'text',
text: paragraphs[i].innerText,
style: {
lineHeight: '2em' // 自定义行高
}
});
}
return result;
}
// 示例HTML内容
let htmlContent = `<p>这是第一段。</p><p>这是第二段。</p>`;
// 解析后的组件数组
let richTextComponents = parseHTML(htmlContent);
// 在nvue页面中使用这些组件
export default {
data() {
return {
richTextComponents: richTextComponents
};
},
template: `
<div>
<block v-for="(item, index) in richTextComponents" :key="index">
<text :style="item.style">{{item.text}}</text>
<text style="margin-bottom: 1em;"></text> <!-- 模拟段落间距 -->
</block>
</div>
`
};
注意:
- 上述代码中的
parseHTML
函数仅作为示例,它只能处理简单的 HTML 结构。对于更复杂的 HTML 内容,可能需要使用更强大的 HTML 解析库。 - 在
nvue
中,我们使用<text>
组件来显示文本,并通过style
属性设置行高。 - 由于
nvue
不支持直接使用 CSS 类,因此样式需要内联设置。
这种方法虽然增加了开发复杂度,但提供了更高的灵活性,允许我们自定义几乎任何样式属性。