zoukankan      html  css  js  c++  java
  • "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=" 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>
    

    扫码体验

  • 相关阅读:
    Digital Video Stabilization and Rolling Shutter Correction using Gyroscope 论文笔记
    Distortion-Free Wide-Angle Portraits on Camera Phones 论文笔记
    Panorama Stitching on Mobile
    Natural Image Stitching with the Global Similarity Prior 论文笔记 (三)
    Natural Image Stitching with the Global Similarity Prior 论文笔记(二)
    Natural Image Stitching with the Global Similarity Prior 论文笔记(一)
    ADCensus Stereo Matching 笔记
    Efficient Large-Scale Stereo Matching论文解析
    Setting up caffe on Ubuntu
    Kubernetes配置Secret访问Harbor私有镜像仓库
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/html-fu-wen-benzu-jianltrichtextgt--kuai-ying-yong.html
Copyright © 2011-2022 走看看