uni-app 富文本解析-小程序
2024-10-16 15:31:18
原文：http://www.upwqy.com/manual/info/105.html
1 引入插件 gaoyia-parse
链接：https://pan.baidu.com/s/1UusfXxHhHcoaKpUVFE2Xqw 提取码：zuqt
2 创建组件 rich-content.vue
<template>
<view class="content">
<u-parse :content="content" @preview="preview" @navigate="navigate" style=""/>
</view>
</template>
<script>
//视频和文本解析组件
import uParse from '@/components/gaoyia-parse/parse.vue'
export default {
name: 'wang-content',
components: {
uParse
},
props: {
content: {}
},
created() {},
methods: {
preview(src, e) {
// do something
},
navigate(href, e) {
// do something
}
}
}
</script>
在详情页面 details.vue 中 引入组件
<wangContent :content='content'></wangContent>
import wangContent from '@/components/wang/rich-content.vue';
components: {
wangContent
}
完整代码如下
<template>
<view class="details">
<wangContent :content='content'></wangContent>
</view>
</template>
<script>
import wangContent from '@/components/wang/rich-content.vue';
export default {
components: {
wangContent
},
onLoad(option) {
if (typeof option.id !== 'undefined' && option.id) {
this.gid = option.id
} else {
uni.showToast({
title: '缺少商品id',
icon: 'none'
})
uni.navigateBack({
delta: 1
})
return false
}
this.getInfo()
},
data() {
return {
content:''
}
},
methods: {
getInfo(){
var params = {
goods_id:this.gid
}
this.$api.goods_info(params,res=>{
this.content = res.data.intro
})
}
}
}
</script>
<style>
</style>最新文章
- 菜鸟学Struts2——零配置(Convention )
- Jetstrap 在线构建 Bootstrap 的工具
- Entity Framework 5.0系列之EF概览
- ruby基础语法
- 结构类模式（七）：代理（Proxy）
- 随着visual studio 2013 发布.带来的一些变化
- SpringBoot配置
- [数据算法]D1.BloomFilter
- python面试题之如何用Python输出一个斐波那契数列
- gentoo 建立本地软件库并安装软件 Custom repository
- 潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
- 开发中清除css加载的缓存使用
- 836. Rectangle Overlap 矩形重叠
- ansible-api 调试
- Android ListView demo
- HDU 5701 中位数计数 （思维题）
- Eclipse编译快捷键
- Jqmobile Secha Ionic比较
- DLL Dynamic-Link Library Search Order
- memcahce 介绍以及安装以及扩展的安装