项目中遇到的问题 u-parse 组件渲染问题

最新推荐文章于 2024-05-11 16:30:15 发布
最新推荐文章于 2024-05-11 16:30:15 发布
阅读量1.2k 收藏
点赞数
分类专栏： 项目遇到的问题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43853213/article/details/125617021
版权
  1. 最近使用富文本渲染结合vuex使用渲染会有界面数据渲染问题

比如，我第一次进入富文本界面A，显示是没有问题的。
后面点击富文本界面B，B界面会先展示，之前A页面的UI界面，然后等一会，切换到B页面的内容。
这样用户体验非常不友好。

解决方案

之前富文本里面的数据是之前引用vuex里面的数据，我们使用data里面定义的数据，通过watch监听
vuex的数据，赋值给data里面定义的数据，就可以解决这个问题

富文本渲染会有数据显示 undefined的类型，需要用数据来判断显示即可

<text v-if="parseData.isHot">热点</text>
龙马啊
关注
专栏目录
【uni-app】uParse中table的渲染问题
Minions_Fatman的博客
12-01 743
修改components\feng-parse\parse.css。
parse:uParse修复​​版，优化表格，css等，html富文本加载
03-15
uParse更新说明 uParse-查询反馈交流群83254601【非uniapp官方】 1.2.0修复了一些历史遗留问题 关于组件的一些说明 本组件修复自官方uParse uParse适用于uni-app / mpvue的富文本解析组件 支持Html，Markdown解析，Fork自： 对于某些html标签不闭合等渲染有问题的 ，如果是PHP推荐结合使用$ this-> m_dom = new DOMDocument（）; 属性 名称 类型 默认值 描述 userSelect 细绳 文本 没有，文本，全部，元素是否可选可复制 imgOptions 目的 参照组件源码和uni.previewImage文档 把previewImage的选项拿出来 装货 布尔型 错误的 数据加载状态 班级名称 细绳 - 自定义类名称 内容 细绳 - 渲染内容 没有数据 细绳 数据不能为空 空数据时的渲
uParse 适用于 uni-app/mpvue 的富文本解析组件
a2350799329的博客
04-30 308
GitHub - dcloudio/uParse: 📰适用于 uni-app/mpvue 的富文本解析自定义组件https://github.com/dcloudio/uParse推荐一个uni-app/mpvue 的富文本解析组件
Uni-app 之uParse 富文本解析 完美解析富文本！
Z_Gleng的博客
06-23 8877
完美解析富文本
uniapp之 uView u-parse组件富文本复制无效的解决方法
subtle_01的博客
05-07 1003
在项目中使用u-parse组件,设置了:selectable="true" ,结果发现长按复制没有反应注:本人使用的ios设备,小程序项目试了很多方法,结果都无效,所以查看了下u-parse组件源码,在trees中貌似没有设置selectable属性然后查看了一下trees组件,发现trees组件中引用的rich-text组件在uniapp的rich-text组件查看,这个组件是支持selectable属性经查阅后做以下修改,修复了IOS设备u-parse组件富文本复制无效的问题。
u-parse解析富文本
04-13
本文将深入探讨"u-parse"这个专为uniAPP设计的富文本解析组件，以及如何在项目中有效地运用它。 一、u-parse简介 "u-parse"是uniAPP生态中的一个插件，主要功能是将HTML字符串转换为uniAPP可识别的组件结构，以便在...
u-parse.zip
03-27
总的来说，"u-parse.zip"中的"u-parse"组件是uni-app处理富文本的利器，它通过高效且灵活的方式，帮助开发者实现了跨平台富文本的完美展示。无论你是新手还是经验丰富的开发者，熟练掌握这个组件都将极大地提升你的...
项目中遇到的bug或技术难点（持续更新中）
weixin_45381828的博客
10-16 3900
1，在页面布局中，使用img图片设置宽高为父元素100%，会出现有默认空隙问题。 解决：1：给img标签添加float:left 2:给img添加display:black
uniapp遇到的问题
weixin_45888412的博客
01-13 2639
uniapp遇到的问题 scroll-view横向滚动 <template> <scroll-view scroll-x="true" class="scrollX"></scroll-view> </template> <style scoped> .scrollX{ width: 100%; overflow: hidden; /* 必须要添加才能生效 */ white-space: n
uParse修复版优化表格css等html富文本加载
08-10
uParse修复版，优化表格，css等，html富文本加载
Python常用组件、命令大总结(持续更新)
热门推荐
LDC，公众号【轻松学编程】
03-12 1万+
Python后端开发常用组件、命令（干货） 持续更新中… 1、生成6位数字随机验证码 import random import string def num_code(length=6): """ 生成长度为length的数字随机验证码 :param length: 验证码长度 :return: 验证码 """ return ''.jo.....................
关于页面渲染时 闪一下 数据消失的问题
m0_47408822的博客
10-08 805
今天遇见使用vue遇到一个问题 ，当我给div添加loading的时候 出现了一个问题 ：当我切换每页展示的数量时 页面渲染的时候 闪一下 数据就消失啦 ，当我把loading去掉之后 ，这个问题就消失啦 ，在这里记录一下，具体原因，目前不清楚 哈哈哈 ...
uParse uniapp数据不能为空
深漂小码哥
04-02 1206
Uparse插件导致的 noData: { type: String, default: '<div style="color: red;">数据不能为空</div>' }, 改为 noData: { type: String, default: '' },
uView u-parse 在nvue页面中无作用踩坑
yueye_wu的博客
04-24 781
在uni-app开发的app nvue页面中有需要回显渲染字符串形式的富文本内容但使用v-html和uniapp的rich-text组件都无法起到作用，就想到了使用uView中u-parse进行尝试。uView我是使用uniApp插件市场导入的方式将插件导入项目的uni_modules中。
nvue uview u-parse 不显示的问题解决ban
键键的专栏
06-23 3055
问题：按照官方文档：Parse 富文本解析器 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架使用u-parse ，在nvue中不显示富文本内容。
uniapp 微信小程序 u-parse 富文本解析插件解析不了多个空格,多个空格会被模版解析成单个空格问题解决
最新发布
qq_56538005的博客
05-11 641
【代码】uniapp 微信小程序 u-parse 富文本解析插件解析不了多个空格,多个空格会被模版解析成单个空格问题解决。
微信小程序富文本插件 Parser
编程之美
08-27 1873
https://jin-yufeng.github.io/Parser/#/ https://github.com/jin-yufeng/Parser
uni-app富文本渲染的三种方案
在校前端菜菜大学僧
03-05 1220
渲染富文本当然是要把里面的样式渲染出来啦，但这只是最最最基础的，还要渲染的完美而不是千奇百怪，与此同时还要支持富文本中的链接跳转，图片预览，好啦，既然我们的目标已经知道了，那我们来分析一下常见的几种富文本解析方式以及优缺点吧。还能绑定点击跳转事件，对于里面的image点开也有预览效果。选择安装包或者直接将插件写入项目如下。content为绑定的富文本字符串。tagStyle为绑定的标签样式。（uniapp语法）
正确使用uview的u-parse组件imgtap方法
05-14
u-parse组件是uview-ui的一个组件，可以将HTML代码解析成微信小程序的WXML代码，并且支持一些特定的标签和属性。imgtap方法可以在u-parse组件中使用，用于处理图片的点击事件。 下面是正确使用u-parse组件imgtap方法的步骤： 1. 在使用u-parse组件的页面或组件中引入u-parse组件，并在需要解析HTML代码的地方使用u-parse组件。 2. 在u-parse组件上绑定imgtap事件。 3. 在事件处理函数中，获取当前点击的图片的src属性值，并进行相应的处理。 示例代码如下： ``` <template> <u-parse @imgtap="handleImgTap" :content="html"></u-parse> </template> <script> import uParse from "@/uview-ui/components/u-parse/u-parse.vue"; export default { components: { uParse }, data() { return { html: "<div><img src='https://example.com/img.jpg' /></div>" }; }, methods: { handleImgTap(event) { const { src } = event.currentTarget.dataset; // 处理点击事件，比如预览图片 uni.previewImage({ urls: [src] }); } } } </script> ``` 注意：在u-parse组件上绑定imgtap事件时，需要添加`:data="true"`属性，以便获取当前点击的图片的src属性值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值