uni-app nvue 中使用 rich-text 不支持设置行高

发布于 1周前 作者 h691938207 来自 Uni-App

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-appnvue 环境中,确实存在 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>
    `
};

注意:

  1. 上述代码中的 parseHTML 函数仅作为示例,它只能处理简单的 HTML 结构。对于更复杂的 HTML 内容,可能需要使用更强大的 HTML 解析库。
  2. nvue 中,我们使用 <text> 组件来显示文本,并通过 style 属性设置行高。
  3. 由于 nvue 不支持直接使用 CSS 类,因此样式需要内联设置。

这种方法虽然增加了开发复杂度,但提供了更高的灵活性,允许我们自定义几乎任何样式属性。

回到顶部