rich-text-complex.uvue 2.9 KB
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1 2
<template>
  <!-- #ifdef APP -->
xuty73419315's avatar
xuty73419315 已提交
3
  <scroll-view style="flex: 1;">
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
4 5
    <!-- #endif -->
    <view>
W
微调  
wanganxp 已提交
6
      <page-head title="rich-text-complex"></page-head>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
7 8 9 10 11 12 13 14 15 16 17 18 19
      <view class="uni-padding-wrap uni-common-mt">
        <rich-text :nodes="htmlString" @itemclick="itemClick"></rich-text>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
20
        htmlString: '<p><a href="https://www.dcloud.io/hbuilderx.html">HBuilderX</a><br/><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img><h1>HBuilderX,轻巧、极速,极客编辑器</h1><p style="color:red;"><small>HBuilderX,轻巧、极速,极客编辑器 </small><big>HBuilderX,轻巧、极速,极客编辑器</big><strong>HBuilderX,轻巧、极速,极客编辑器</strong><i>HBuilderX,轻巧、极速,极客编辑器 </i><u>HBuilderX,轻巧、极速,极客编辑器</u><del>HBuilderX,轻巧、极速,极客编辑器</del></p><h2>uni-app x,终极跨平台方案</h2>、<p style="background-color: yellow;"><small>uni-app x,终极跨平台方案 </small><big>uni-app x,终极跨平台方案</big><strong>uni-appx,终极跨平台方案 </strong><i>uni-app x,终极跨平台方案 </i><u>uni-app x,终极跨平台方案 </u><del>uni-appx,终极跨平台方案</del></p><h3>uniCloud,js serverless云服务</h3><p style="text-decoration: line-through;"><small>uniCloud,js serverless云服务 </small><big>uniCloud,jsserverless云服务</big><strong>uniCloud,js serverless云服务 </strong><i>uniCloud,js serverless云服务 </i><u>uniCloud,jsserverless云服务</u><del>uniCloud,js serverless云服务</del></p><h4>uts,大一统语言</h4><p style="text-align: center;"><small>uts,大一统语言 </small><big>uts,大一统语言 </big><strong>uts,大一统语言</strong><i>uts,大一统语言</i><u>uts,大一统语言 </u><del>uts,大一统语言</del></p><h5>uniMPSdk,让你的App具备小程序能力</h5><h6>uni-admin,开源、现成的全端管理后台</h6><ul><li style="color: red; text-align: left;">uni-app x,终极跨平台方案</li><li style="color: green; text-align: center;">uni-app x,终极跨平台方案</li><li style="color: blue; text-align: right;">uni-app x,终极跨平台方案</li></ul><a href="https://uniapp.dcloud.net.cn">uni-app</a><br/><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img></p>'
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
21 22 23 24 25
      }
    },
    methods: {
      itemClick(e : RichTextItemClickEvent) {
        console.log(JSON.stringify(e.detail));
W
微调  
wanganxp 已提交
26
        let clicktext = '';
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
27
        if (e.detail.src != null) {
W
微调  
wanganxp 已提交
28
          clicktext = '点击了图片,src = ' + e.detail.src;
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
29
        } else if (e.detail.href != null) {
W
微调  
wanganxp 已提交
30
          clicktext = '点击了链接,href = ' + e.detail.href;
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
31 32
        }
        uni.showModal({
W
微调  
wanganxp 已提交
33 34
          content:clicktext,
          showCancel:false
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
35
        });
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
36 37 38 39 40 41 42 43
      }
    }
  }
</script>

<style>

</style>