uni-app 微信小程序 rich-text 组件图片宽度自适应

我们在使用 uni-app 开发前端页面时，经常会用到富文本展示数据，如果使用自带富文本组件 rich-text，前端渲染富文本中的图片的时候可能会因为宽度问题出现不能显示完整的情况，如果是在 H5 中比较好办，直接设置样式就能达到预期效果，这边就不展开。本文主要记录在微信小程序中使用 rich-text 时对图片宽度进行自适应处理，以达到能完全显示。废话不多说，直接上代码：

JS 代码：

<script>
    export default {
        data() {
            return {
                richData: ''
            }
        },
        methods: {
            formatRichText(html) { // 富文本内容格式化
                return html && html.replace(/<img[^>]*>/gi, function(match, capture) { // 查找所有的 img 元素
                    return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi, '') // 删除找到的所有 img 元素中的 style 属性
                }).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
            }
        }
    }
</script>

HTML 代码：

<template>
    <rich-text :nodes="formatRichText(richData)"></rich-text>
</template>

版权属于：瞭月

本文链接：https://www.lervor.com/archives/267/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。