richtext.html 35.4 KB
Newer Older
J
JiM-W 已提交
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>richtext | Chameleon 变色龙</title>
    <meta name="description" content="一套代码运行多端,一端所见即多端所见">
    <meta name="generator" content="VuePress 1.4.0">
    <link rel="icon" href="/brand/logo.png">
    
J
JiM-W 已提交
11 12
    <link rel="preload" href="/assets/css/0.styles.54ae56e3.css" as="style"><link rel="preload" href="/assets/js/app.bcfec7ef.js" as="script"><link rel="preload" href="/assets/js/60.7feedc98.js" as="script"><link rel="preload" href="/assets/js/1.b97c77c7.js" as="script"><link rel="preload" href="/assets/js/36.70afd6a5.js" as="script"><link rel="preload" href="/assets/js/2.d28a060e.js" as="script"><link rel="prefetch" href="/assets/js/10.051c47d1.js"><link rel="prefetch" href="/assets/js/11.2aa2c0dc.js"><link rel="prefetch" href="/assets/js/12.c44665a3.js"><link rel="prefetch" href="/assets/js/13.70dfc111.js"><link rel="prefetch" href="/assets/js/14.6a71260e.js"><link rel="prefetch" href="/assets/js/15.705c4158.js"><link rel="prefetch" href="/assets/js/16.71245a0d.js"><link rel="prefetch" href="/assets/js/17.1a08cd91.js"><link rel="prefetch" href="/assets/js/18.e24096cc.js"><link rel="prefetch" href="/assets/js/19.8a8e69c2.js"><link rel="prefetch" href="/assets/js/20.cfee8d18.js"><link rel="prefetch" href="/assets/js/21.659a4f9f.js"><link rel="prefetch" href="/assets/js/22.ca78fab7.js"><link rel="prefetch" href="/assets/js/23.28baa1bb.js"><link rel="prefetch" href="/assets/js/24.c0a085ec.js"><link rel="prefetch" href="/assets/js/25.2f0d69d1.js"><link rel="prefetch" href="/assets/js/26.205c20fa.js"><link rel="prefetch" href="/assets/js/27.5314d987.js"><link rel="prefetch" href="/assets/js/28.0087c8dc.js"><link rel="prefetch" href="/assets/js/29.70de71c9.js"><link rel="prefetch" href="/assets/js/30.9c7a51df.js"><link rel="prefetch" href="/assets/js/31.a0c45279.js"><link rel="prefetch" href="/assets/js/32.b68995bf.js"><link rel="prefetch" href="/assets/js/33.5ebcc272.js"><link rel="prefetch" href="/assets/js/34.76b8c9f0.js"><link rel="prefetch" href="/assets/js/35.6d4c26dc.js"><link rel="prefetch" href="/assets/js/37.d40c4e19.js"><link rel="prefetch" href="/assets/js/38.3f0d946f.js"><link rel="prefetch" href="/assets/js/39.def09b51.js"><link rel="prefetch" href="/assets/js/40.7f6b7784.js"><link rel="prefetch" href="/assets/js/41.a0de49d9.js"><link rel="prefetch" href="/assets/js/42.8c3379e9.js"><link rel="prefetch" href="/assets/js/43.a81a4bb3.js"><link rel="prefetch" href="/assets/js/44.a26444fd.js"><link rel="prefetch" href="/assets/js/45.1393dfc0.js"><link rel="prefetch" href="/assets/js/46.e2ebc893.js"><link rel="prefetch" href="/assets/js/47.4da9ab59.js"><link rel="prefetch" href="/assets/js/48.2fdfc375.js"><link rel="prefetch" href="/assets/js/49.f9d1a56b.js"><link rel="prefetch" href="/assets/js/5.1068e2bd.js"><link rel="prefetch" href="/assets/js/50.1ceb9d3f.js"><link rel="prefetch" href="/assets/js/51.a255833a.js"><link rel="prefetch" href="/assets/js/52.98e72823.js"><link rel="prefetch" href="/assets/js/53.03ba08cb.js"><link rel="prefetch" href="/assets/js/54.9d82aee4.js"><link rel="prefetch" href="/assets/js/55.4956ad06.js"><link rel="prefetch" href="/assets/js/56.5f511c62.js"><link rel="prefetch" href="/assets/js/57.9806475a.js"><link rel="prefetch" href="/assets/js/58.ebf8ba39.js"><link rel="prefetch" href="/assets/js/59.ebca6969.js"><link rel="prefetch" href="/assets/js/6.25d813cf.js"><link rel="prefetch" href="/assets/js/61.45ebc898.js"><link rel="prefetch" href="/assets/js/62.3a2ee585.js"><link rel="prefetch" href="/assets/js/63.310dd45c.js"><link rel="prefetch" href="/assets/js/64.5cc72cbe.js"><link rel="prefetch" href="/assets/js/65.fdc686c2.js"><link rel="prefetch" href="/assets/js/66.7730cd91.js"><link rel="prefetch" href="/assets/js/67.5c4cc3ba.js"><link rel="prefetch" href="/assets/js/68.35e45285.js"><link rel="prefetch" href="/assets/js/69.f52c6d25.js"><link rel="prefetch" href="/assets/js/7.9a617213.js"><link rel="prefetch" href="/assets/js/70.fb558cc9.js"><link rel="prefetch" href="/assets/js/71.bb886562.js"><link rel="prefetch" href="/assets/js/72.3c87e0a1.js"><link rel="prefetch" href="/assets/js/73.4cd26a47.js"><link rel="prefetch" href="/assets/js/74.ae876b8f.js"><link rel="prefetch" href="/assets/js/75.80730e6c.js"><link rel="prefetch" href="/assets/js/76.3eca2e20.js"><link rel="prefetch" href="/assets/js/77.5f4c3e9b.js"><link rel="prefetch" href="/assets/js/78.991d2007.js"><link rel="prefetch" href="/assets/js/79.2798e216.js"><link rel="prefetch" href="/assets/js/8.b158ec59.js"><link rel="prefetch" href="/assets/js/80.c095fb3b.js"><link rel="prefetch" href="/assets/js/81.e408e60b.js"><link rel="prefetch" href="/assets/js/82.cc25d73a.js"><link rel="prefetch" href="/assets/js/83.356558e4.js"><link rel="prefetch" href="/assets/js/84.8866a75b.js"><link rel="prefetch" href="/assets/js/85.87eac94e.js"><link rel="prefetch" href="/assets/js/86.76900837.js"><link rel="prefetch" href="/assets/js/87.103b6b87.js"><link rel="prefetch" href="/assets/js/88.94e419d1.js"><link rel="prefetch" href="/assets/js/89.8be3decb.js"><link rel="prefetch" href="/assets/js/9.dc5cb60e.js"><link rel="prefetch" href="/assets/js/90.48dae3fa.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.1b18fdaf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.54ae56e3.css">
J
JiM-W 已提交
13 14
  </head>
  <body>
J
JiM-W 已提交
15
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/brand/logo.png" alt="Chameleon 变色龙" class="logo"> <span class="site-name can-hide">Chameleon 变色龙</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
J
JiM-W 已提交
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/components/base" class="sidebar-heading clickable open"><span>内置组件</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/view.html" class="sidebar-link">view</a></li><li><a href="/components/cover-view.html" class="sidebar-link">cover-view</a></li><li><a href="/components/text.html" class="sidebar-link">text</a></li><li><a href="/components/richtext.html" class="active sidebar-link">richtext</a></li><li><a href="/components/page.html" class="sidebar-link">page</a></li><li><a href="/components/block.html" class="sidebar-link">block</a></li><li><a href="/components/cell.html" class="sidebar-link">cell</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>布局</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/scroller.html" class="sidebar-link">scroller</a></li><li><a href="/components/list.html" class="sidebar-link">list</a></li><li><a href="/components/container.html" class="sidebar-link">container</a></li><li><a href="/components/row.html" class="sidebar-link">row</a></li><li><a href="/components/col.html" class="sidebar-link">col</a></li><li><a href="/components/carousel.html" class="sidebar-link">carousel</a></li><li><a href="/components/carousel-item.html" class="sidebar-link">carousel-item</a></li><li><a href="/components/refresh-view.html" class="sidebar-link">refresh-view</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>表单</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/button.html" class="sidebar-link">button</a></li><li><a href="/components/input.html" class="sidebar-link">input</a></li><li><a href="/components/textarea.html" class="sidebar-link">textarea</a></li><li><a href="/components/switch.html" class="sidebar-link">switch</a></li><li><a href="/components/radio.html" class="sidebar-link">radio</a></li><li><a href="/components/checkbox.html" class="sidebar-link">checkbox</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>媒体</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/image.html" class="sidebar-link">image</a></li><li><a href="/components/video.html" class="sidebar-link">video</a></li><li><a href="/components/audio.html" class="sidebar-link">video</a></li></ul></section></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/components/expand" class="sidebar-heading clickable"><span>扩展组件</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/c-toast.html" class="sidebar-link">c-toast</a></li><li><a href="/components/c-loading.html" class="sidebar-link">c-loading</a></li><li><a href="/components/c-dialog.html" class="sidebar-link">c-dialog</a></li><li><a href="/components/c-popup.html" class="sidebar-link">c-popup</a></li><li><a href="/components/c-tip.html" class="sidebar-link">c-tip</a></li><li><a href="/components/c-actionsheet.html" class="sidebar-link">c-actionsheet</a></li><li><a href="/components/c-tab.html" class="sidebar-link">c-tab</a></li><li><a href="/components/c-picker.html" class="sidebar-link">c-picker</a></li><li><a href="/components/c-picker-panel.html" class="sidebar-link">c-picker-panel</a></li><li><a href="/components/c-picker-item.html" class="sidebar-link">c-picker-item</a></li><li><a href="/components/c-checkbox-group.html" class="sidebar-link">c-checkbox-group</a></li><li><a href="/components/c-radio-group.html" class="sidebar-link">c-radio-group</a></li><li><a href="/components/c-tabbar.html" class="sidebar-link">c-tabbar</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="richtext"><a href="#richtext" class="header-anchor">#</a> richtext</h1> <hr> <p><code>&lt;richtext&gt;</code>是用于富文本格式数据转换的基础内容组件。</p> <h2 id="属性"><a href="#属性" class="header-anchor">#</a> 属性</h2> <table><tr><th width="200px">属性名</th> <th>类型</th> <th width="60px">必填</th> <th>说明</th></tr> <tr><td>richData</td> <td>Object</td> <td></td> <td>富文本数据,格式为:{message, rich_message}</td></tr></table> <h4 id="richdata-message"><a href="#richdata-message" class="header-anchor">#</a> richData.message</h4> <table><tr><th width="200px">属性名</th> <th>类型</th> <th width="60px">必填</th> <th>说明</th></tr> <tr><td>message</td> <td>String</td> <td></td> <td>文本内容</td></tr></table> <h4 id="richdata-rich-message"><a href="#richdata-rich-message" class="header-anchor">#</a> richData.rich_message</h4> <table><tr><th width="200px">属性名</th> <th>类型</th> <th width="60px">必填</th> <th>说明</th></tr> <tr><td>rich_message</td> <td>Array</td> <td></td> <td>富文本处理信息,rich_message[index]为对象</td></tr></table> <h4 id="rich-message-index"><a href="#rich-message-index" class="header-anchor">#</a> rich_message[index]</h4> <table><tr><th width="200px">属性名</th> <th>类型</th> <th width="60px">必填</th> <th>说明</th></tr> <tr><td>start</td> <td>Number</td> <td></td> <td>属性覆盖起始下标(0开始)</td></tr> <tr><td>end</td> <td>Number</td> <td></td> <td>属性覆盖结束下标</td></tr> <tr><td>color</td> <td>String</td> <td></td> <td>字体颜色</td></tr> <tr><td>font_size</td> <td>Number</td> <td></td> <td>字体大小,单位为cpx</td></tr> <tr><td>font_family</td> <td>String</td> <td></td> <td>字体名称,可选系统支持名称,否则降级为系统默认字体</td></tr> <tr><td>font_style</td> <td>String</td> <td></td> <td>字体样式,可选 italic | normal,默认 normal</td></tr> <tr><td>font_weight</td> <td>String</td> <td></td> <td>文本粗细,可选 bold | normal,默认 normal</td></tr> <tr><td>text_decoration</td> <td>String</td> <td></td> <td>文本修饰,可选 underline | line-through | none,默认 none</td></tr> <tr><td>click</td> <td>Boolean</td> <td></td> <td>是否增加事件监听,可选 true | false ,默认 false</td></tr> <tr><td>callback</td> <td>Function</td> <td></td> <td>事件监听回调,建议使用箭头函数</td></tr></table> <h2 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>richtext</span> <span class="token attr-name">rich-data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{richData}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>richtext</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> cml <span class="token keyword">from</span> <span class="token string">'chameleon-api'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">Richtext</span> <span class="token punctuation">{</span>
  data <span class="token operator">=</span> <span class="token punctuation">{</span>
    richData<span class="token operator">:</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'这是一段富文本'</span><span class="token punctuation">,</span>
      rich_message<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          color<span class="token operator">:</span> <span class="token string">'#666666'</span><span class="token punctuation">,</span>
          font_size<span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
          start<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          end<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
          font_family<span class="token operator">:</span> <span class="token string">'sans'</span><span class="token punctuation">,</span>
          font_weight<span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>
          click<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          color<span class="token operator">:</span> <span class="token string">'#fc9153'</span><span class="token punctuation">,</span>
          font_size<span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
          start<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
          end<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
          font_family<span class="token operator">:</span> <span class="token string">'serif'</span><span class="token punctuation">,</span>
          font_weight<span class="token operator">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
          font_style<span class="token operator">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>
          text_decoration<span class="token operator">:</span> <span class="token string">'underline'</span><span class="token punctuation">,</span>
          click<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">clickHandle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">clickHandle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      cml<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        message<span class="token operator">:</span> <span class="token string">'richtext click'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Richtext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.container</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">cml-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div style="display:flex;flex-direction:row;justify-content:space-around;align-items:flex-end;"><div style="display:flex;flex-direction:column;align-items:center;"><img src="/assets/img/richtext_wx.e707fa83.png" width="200px"> <text style="color:#fda775;font-size:24px;">wx</text></div> <div style="display:flex;flex-direction:column;align-items:center;"><img src="/assets/img/richtext_web.6d77da72.png" width="200px"> <text style="color:#fda775;font-size:24px;">web</text></div> <div style="display:flex;flex-direction:column;align-items:center;"><img src="/assets/img/richtext_weex.8fe82a9a.jpg" width="200px"> <text style="color:#fda775;font-size:24px;">native</text></div></div> <h2 id="注意"><a href="#注意" class="header-anchor">#</a> 注意</h2> <p>richtext 为 chameleon-sdk 扩展组件,在 weex-playground 中不会渲染,请用 chameleon-playground 扫描查看渲染结果。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">

      <a href="/components/text.html" class="prev">
        text
      </a></span> <span class="next"><a href="/components/page.html">
        page
      </a>

    </span></p></div> <footer class="footer" data-v-aa5c954a><div class="content" data-v-aa5c954a><div class="left" data-v-aa5c954a><a href="/" class="brand" data-v-aa5c954a><img src="data:image/png;base64,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" alt="logo" data-v-aa5c954a> <span data-v-aa5c954a>Chameleon</span></a> <div class="info" data-v-aa5c954a>Copyright © 2020 DiDi Chuxing Inc.</div></div> <div class="right" data-v-aa5c954a><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>资源</h4> <a href="/components/expand.html" data-v-aa5c954a>Chameleon UI</a><a href="https://github.com/beatles-chameleon/cml-demo" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon Demo
            </a><a href="https://github.com/chameleon-team/awesome-cml" target="_blank" rel="noopener" data-v-aa5c954a>
              Awesome Chameleon
            </a><a href="https://github.com/didi/chameleon/releases" target="_blank" rel="noopener" data-v-aa5c954a>
              更新记录
            </a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>社区</h4> <a href="https://github.com/didi/chameleon/issues" target="_blank" rel="noopener" data-v-aa5c954a>
              GitHub
            </a><a data-v-aa5c954a><span data-v-aa5c954a>微信交流群</span> <img src="/assets/img/qr_weixin.59cd000a.png" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>QQ 交流群</span> <img src="/assets/img/qr_qq.115678d7.jpg" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>顺风公鹿</span> <img src="/assets/img/qr_deer.e2ddb653.png" alt="image" data-v-aa5c954a></a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>关于</h4> <a href="https://github.com/didi/chameleon/wiki/Chameleon%E5%9B%A2%E9%98%9F" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon 团队
            </a><a href="https://github.com/didi/chameleon/wiki/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC" target="_blank" rel="noopener" data-v-aa5c954a>
              加入我们
            </a><a href="mailto:CML@didichuxing.com" target="_blank" rel="noopener" data-v-aa5c954a>
              联系我们
            </a><a href="https://github.com/didi/chameleon/wiki/Contributors" target="_blank" rel="noopener" data-v-aa5c954a>
              贡献者
            </a></div></div></div></footer></main></div><div class="global-ui"><!----></div></div>
J
JiM-W 已提交
121
    <script src="/assets/js/app.bcfec7ef.js" defer></script><script src="/assets/js/60.7feedc98.js" defer></script><script src="/assets/js/1.b97c77c7.js" defer></script><script src="/assets/js/36.70afd6a5.js" defer></script><script src="/assets/js/2.d28a060e.js" defer></script>
J
JiM-W 已提交
122 123
  </body>
</html>