【uniapp】富文本点击事件

背景 : 接到需求,需要给app内的富文本增加点击事件进行界面跳转,原来我们只是使用的 标签渲染富文本

实现

使用第三方插件地址: uParse 富文本解析 - DCloud 插件市场 https://ext.dcloud.net.cn/plugin?id=183#detail

插件引入到项目
在这里插入图片描述

	import uParse from '@/components/u-parse/u-parse.vue';

	components: {
    
    
		uParse
	},
	
	data(){
    
    
		return {
    
    
			article: `<a href='/pages/player/player1?title=名称&id=id&packId=learnTypeId&type=7'>我是a标签</a>`,
		}
	}

	navigate(url, e) {
    
    
		console.log('url', url); // /pages/player/player1?title=名称&id=id&packId=learnTypeId&type=7
		conso.log(e)
		uni.navigateTo({
    
    
			url:'/pages/player/player3?id=1309&packId=237'
		})
	},
	<view class="swiper-item-text swiper-item-text1">
		<u-parse :content="article" @preview="preview" @navigate="navigate"></u-parse>
	</view>

参考博主原文 : https://zhuanlan.zhihu.com/p/554786156

猜你喜欢

转载自blog.csdn.net/qq_45481971/article/details/131062312