组件库文档 tmui.design
富文本 Html
富文本,用于解析html内容,不可把此组件当作解析器充当页面使用。使用场景为需要展示html的地方。
此组件非本人,开源作者地址见:mp-html
🌶️ 富文本 Html 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<view class="pa-32">
<tm-sheet :margin="[0, 0]">
<tm-text :font-size="32" label="以下html页面解析内容,使用方法见文档."></tm-text>
<tm-divider></tm-divider>
<tm-text :font-size="26" label="本组件是开源组件mp-html集成,非我开发"></tm-text>
</tm-sheet>
<view class="py-16"></view>
<tm-html :content="rx"></tm-html>
</view>
</tm-app>
</template>
<script lang="ts" setup>
import tmHtml from '@/tmui/components/tm-html/tm-html.vue'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
let rx = `<div class="content_area" id="content_area">
<!--repaste.body.begin--><p><strong> 央视网消息:</strong>在安徽中稻迎来了丰收季。在肥东县相邻的两块地景象大不相同,农机作业的进度和效率也不同。<br></p><p style="text-align: center;" class="photo_img_20190808"><img src="//p4.img.cctvpic.com/photoworkspace/contentimg/2022/10/14/2022101414244666208.jpg" alt=""></p><p style="text-align: center;" class="photo_img_20190808"><img src="//p5.img.cctvpic.com/photoworkspace/contentimg/2022/10/14/2022101414244671910.jpg" alt=""></p><p> <strong>总台记者 吴俊:</strong>这里是肥东县古城镇,今天天气晴好,收割机已经进入高标准农田作业。去年秋季,肥东县有7.8万亩田地进行高标准农田改造。改造后的农田,可以说是田成方、林成网、渠相通、路相连。这里一路之隔,一侧是改造过的农田,不仅有了机耕路,农机可以直接到田边,而且修建了标准的灌渠,灌溉和排涝不愁。而路的一侧是还没改造的地块,只有窄窄的杂草丛生的田埂,灌渠也是这种土渠。另外从航拍画面对比来看,改造过的农田,通过小田变大田,打破了田埂,非常适合农机作业。而没有改造过的,田块大小不均、高低不平,农机也没办法下田作业。<br></p><p style="text-align: center;" class="photo_img_20190808"><img src="//p3.img.cctvpic.com/photoworkspace/contentimg/2022/10/14/2022101414250079300.jpg" alt=""></p><p style="text-align: center;" class="photo_img_20190808"><img src="//p3.img.cctvpic.com/photoworkspace/contentimg/2022/10/14/2022101414250072259.jpg" alt=""></p><p> 改造后的高标准农田,配套了机械深耕、增施有机肥和土壤调理等综合措施,改善了土壤板结度、有机质含量以及酸碱平衡,这为眼前的好收成打下了基础。稻谷颗粒非常饱满,尽管今年水稻在抽穗扬花期遭遇了持续高温,但是高标准农田改造后,能够及时引水灌溉,而且今年当地还种植了抗病新品种,应用了绿色防控等新技术,水稻产量不仅没受太大影响,比去年每亩还高了100斤左右。<br></p><!--repaste.body.end-->
</div>`
</script>
<style></style>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
ts
/
* @property {String} container-style 容器的样式
* @property {String} content 用于渲染的 html 字符串
* @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
* @property {String} domain 主域名,用于拼接链接
* @property {String} error-img 图片出错时的占位图链接
* @property {Boolean} lazy-load 是否开启图片懒加载
* @property {string} loading-img 图片加载过程中的占位图链接
* @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
* @property {Boolean} preview-img 是否允许图片被点击时自动预览
* @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
* @property {Boolean | String} selectable 是否开启长按复制
* @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
* @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
* @property {Object} tag-style 标签的默认样式
* @property {Boolean | Number} use-anchor 是否使用锚点链接
* @event {Function} load dom 结构加载完毕时触发
* @event {Function} ready 所有图片加载完毕时触发
* @event {Function} imgtap 图片被点击时触发
* @event {Function} linktap 链接被点击时触发
* @event {Function} play 音视频播放时触发
* @event {Function} error 媒体加载出错时触发
/