"html富文本"组件:<richtext> —— 快应用原生组件




<template>
<div class="container-full">
<richtext type="html">{{content}}</richtext>
</div>
</template>
<style lang="less">
@import '../Common/styles/container.less';
</style>
<script>
export default {
private: {
content: <div class="item-content" style="background-color: #FFFFFF">
<style>h1{color: red;}</style>
<p class="item-title">h1</p>
<h1>文本测试</h1>
<p class="item-title">h2</p>
<h2>文本测试</h2>
<p class="item-title">h3</p>
<h3>文本测试</h3>
<p class="item-title">h4</p>
<h4>文本测试</h4>
<p class="item-title">h5</p>
<h5>文本测试</h5>
<p class="item-title">h6</p>
<h6>文本测试</h6>
<h3 class="item-title">mark标签</h3>
You can use the mark tag to <mark>highlight</mark> text.
<h3 class="item-title">del标签:被删除的文本</h3>
<del>This line of text is meant to be treated as deleted text.</del>
<h3 class="item-title">s标签:无用的文本</h3>
<s>This line of text is meant to be treated as no longer accurate.</s>
<h3 class="item-title">ins标签:额外插入的文本</h3>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<h3 class="item-title">u标签:为文本添加下划线</h3>
<u>This line of text will render as underlined</u>
<h3 class="item-title">small标签:小号文本</h3>
<small>This line of text is meant to be treated as fine print.</small>
<h3 class="item-title">文本强调</h3>
<strong>This line of text is meant to be treated as fine print.</strong>
<em>This line of text is meant to be treated as fine print.</em>
<p class="item-title">a</p>
<div>
<a href="https://www.quickapp.cn/" style="color: #09ba07;text-decoration: underline">文本测试</a>
</div>
<p class="item-title">img</p>
<div>
<img src="https://bbs.quickapp.cn/template/dingzhi_x_oneplus/dingzhi/logo.png" style="width: 100%;"/>
</div>
<p class="item-title">p</p>
<p>文本测试</p>
<p class="item-title">span</p>
<p><span>文本测试</span></p>
<p class="item-title">strong</p>
<p><strong>文本测试</strong></p>
<p class="item-title">del</p>
<p><del>文本测试</del></p>
<p class="item-title">b</p>
<p><b>文本测试</b></p>
<p class="item-title">i</p>
<p><i>文本测试</i></p>
</div>
}
<script>
扫码体验

H-UI——做体验最好的快应用UI库,让快应用开发就像搭积木!