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

更多关于uni-app nvue 中使用 rich-text 不支持设置行高的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue 中不支持,参考文档
这种情况可以考虑使用 vue 渲染

更多关于uni-app nvue 中使用 rich-text 不支持设置行高的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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 类,因此样式需要内联设置。

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

回到顶部