Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
custom.html 60.5 KB
Newer Older
J
doc: update  
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>自定义组件 | Chameleon 变色龙</title>
    <meta name="description" content="一套代码运行多端，一端所见即多端所见">
    <meta name="generator" content="VuePress 1.4.0">
    <link rel="icon" href="/brand/logo.png">
J
feat: 中文搜索改用chameleon 的id  
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/75.80730e6c.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/36.70afd6a5.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/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
doc: update  
JiM-W 已提交
13 14 
  </head>
  <body>
J
feat: 中文搜索改用chameleon 的id  
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 router-link-active">
J
doc: update  
JiM-W 已提交
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link">
  组件
</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 router-link-active">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link">
  组件
</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
J
feat: 增加案例  
JiM-W 已提交
35 
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/introduction.html" class="sidebar-link">介绍</a></li><li><a href="/docs/setup.html" class="sidebar-link">起步</a></li><li><a href="/docs/cli.html" class="sidebar-link">命令行工具 (CLI)</a></li><li><a href="/docs/folder.html" class="sidebar-link">目录结构</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>框架</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/view.html" class="sidebar-link">视图层</a></li><li><a href="/docs/cmss.html" class="sidebar-link">CMSS介绍</a></li><li><a href="/docs/cml.html" class="sidebar-link">CML 语法</a></li><li><a href="/docs/cml-vue.html" class="sidebar-link">CML - 类 Vue 语法</a></li><li><a href="/docs/logic.html" class="sidebar-link">逻辑层</a></li><li><a href="/docs/store.html" class="sidebar-link">数据管理</a></li><li><a href="/docs/custom.html" class="active sidebar-link">自定义组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/custom.html#创建自定义组件" class="sidebar-link">创建自定义组件</a></li><li class="sidebar-sub-header"><a href="/docs/custom.html#使用自定义组件" class="sidebar-link">使用自定义组件</a></li><li class="sidebar-sub-header"><a href="/docs/custom.html#组件模板和样式" class="sidebar-link">组件模板和样式</a></li><li class="sidebar-sub-header"><a href="/docs/custom.html#组件-vm" class="sidebar-link">组件 VM</a></li></ul></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>高级指引</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/poly.html" class="sidebar-link">多态协议</a></li><li><a href="/docs/build.html" class="sidebar-link">工程化</a></li><li><a href="/docs/io.html" class="sidebar-link">导入与导出</a></li><li><a href="/docs/sdk.html" class="sidebar-link">CML SDK</a></li><li><a href="/docs/mvvm.html" class="sidebar-link">定制扩展端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/migrate-guide.html" class="sidebar-link">CML 迁移指南</a></li><li><a href="/docs/migrate-wx-to-cml.html" class="sidebar-link">迁移微信小程序项目到 CML</a></li><li><a href="/docs/migrate-vue-to-cml.html" class="sidebar-link">迁移 Vue 项目到 CML</a></li><li><a href="/docs/migrate-weex-to-cml.html" class="sidebar-link">迁移 Weex 项目到 CML</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h1> <p>CML 支持简洁的组件化编程。</p> <p>开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。</p> <h2 id="创建自定义组件"><a href="#创建自定义组件" class="header-anchor">#</a> 创建自定义组件</h2> <p>类似页面，自定义组件由 <code>&lt;template&gt;</code> <code>&lt;script&gt;</code> <code>&lt;style&gt;</code> <code>&lt;script cml-type=&quot;json&quot;&gt;</code> 4 部分组成。</p> <p>要编写一个自定义组件，可以在 <code>json</code> 中进行自定义组件声明（将 <code>component</code> 字段设为 <code>true</code>，这是可选操作，因为 CML 会在引用这个文件时自动识别<code>自定义组件</code>）：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
J
doc: update  
JiM-W 已提交
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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 
  <span class="token property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><p>接下来，在 <code>&lt;template&gt;</code> 中编写组件模板，在 <code>&lt;style&gt;</code> 中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见<a href="/docs/cml.html">组件模板和样式</a>。</p> <p><em>代码示例：</em></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 这是自定义组件的内部CML结构 --&gt;</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>inner<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  {{innerText}}
<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>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 这里的样式只应用于这个自定义组件 */</span>
<span class="token selector">.inner</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>注意：在组件 CMSS 中不应使用 ID 选择器、属性选择器和标签名选择器。</strong></p> <p>组件的属性值和内部数据将被用于组件 CML 的渲染，其中，属性值是可由组件外部传入的。</p> <p><em>代码示例：</em></p> <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>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">class</span> <span class="token class-name">CustomCom</span> <span class="token punctuation">{</span>
  props <span class="token operator">=</span> <span class="token punctuation">{</span>
    title<span class="token operator">:</span> String<span class="token punctuation">,</span>
    innerText<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> String<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    content<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      <span class="token keyword">default</span><span class="token operator">:</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>
    list<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Array<span class="token punctuation">,</span>
      <span class="token keyword">default</span><span class="token operator">:</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>

  data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  computed <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  watch <span class="token operator">=</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 punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">beforeCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">beforeMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">destroyed</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">CustomCom</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><h2 id="使用自定义组件"><a href="#使用自定义组件" class="header-anchor">#</a> 使用自定义组件</h2> <p>使用已注册的自定义组件前，首先要在页面的 <code>&lt;script cml-type=&quot;json&quot;&gt;</code> 中进行引用声明。</p> <p>此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径(相对路径或者绝对路径)：</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/the/custom/component&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这样，在页面的 CML 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。</p> <p><em>代码示例：</em></p> <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>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 以下是对一个自定义组件的引用 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component-tag-name</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inner-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Some text<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>component-tag-name</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>
</code></pre></div><p>自定义组件的 CML 节点结构在与数据结合之后，将被插入到引用位置内。</p> <h3 id="细节注意事项"><a href="#细节注意事项" class="header-anchor">#</a> 细节注意事项</h3> <p><strong>一些需要注意的细节：</strong></p> <ul><li>因为 CML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。</li> <li>自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 <code>usingComponents</code> 字段）。</li> <li>自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。</li></ul> <p>**注意，**是否在页面文件中使用 <code>usingComponents</code> 会使得页面的 <code>this</code> 对象的原型稍有差异，包括：</p> <ul><li>使用 <code>usingComponents</code> 时会多一些方法，如 <code>selectComponent</code> 。</li> <li>如果页面比较复杂，新增或删除 <code>usingComponents</code> 定义段时建议重新测试一下。</li></ul> <h2 id="组件模板和样式"><a href="#组件模板和样式" class="header-anchor">#</a> 组件模板和样式</h2> <p>类似于页面，自定义组件拥有自己的 <code>&lt;template&gt;</code> 模板和 <code>&lt;style&gt;</code> 样式。</p> <p>首先我们通过 <code>cml init project</code> 生成一个 CML 项目，然后按照以下操作指引，看下如何使用 CML 的组件</p> <div class="language- extra-class"><pre class="language-text"><code>cml init component
选择普通组件
输入 component-tag-namecomponent-tag-name
</code></pre></div><p>在 <code>src/pages/index/index.cml</code>中引入这个组件</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token string">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token string">&quot;component-tag-name&quot;</span><span class="token operator">:</span><span class="token string">&quot;/components/component-tag-name/component-tag-name&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="组件模板"><a href="#组件模板" class="header-anchor">#</a> 组件模板</h3> <p>组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。</p> <p>在组件模板中可以提供一个 <code>&lt;slot&gt;</code> 节点，用于承载组件引用时提供的子节点。</p> <p><strong>代码示例：</strong></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- component-tag-name.cml --&gt;</span>
<span class="token comment">&lt;!-- 组件模板 --&gt;</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>wrapper<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>view</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>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</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>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- index.cml --&gt;</span>
<span class="token comment">&lt;!-- 引用组件的页面模板 --&gt;</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>component-tag-name</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 这部分内容将被放置在组件 &lt;slot&gt; 的位置上 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>这里是插入到组件slot中的内容<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>component-tag-name</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>
</code></pre></div><h3 id="模板数据绑定"><a href="#模板数据绑定" class="header-anchor">#</a> 模板数据绑定</h3> <p>可以使用数据绑定，这样就可以向子组件的属性传递动态数据。</p> <p><strong>代码示例：</strong></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 引用组件的页面模板 --&gt;</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>component-tag-name</span> <span class="token attr-name">prop-a</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{dataFieldA}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop-b</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{dataFieldB}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 这部分内容将被放置在组件 &lt;slot&gt; 的位置上 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>这里是插入到组件slot中的内容<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>component-tag-name</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>
</code></pre></div><p>在以上例子中，组件的属性 <code>propA</code> 和 <code>propB</code> 将收到页面传递的数据。页面可以通过 <code>this.dataFieldA</code>、<code>this.dataFieldB</code> 来改变绑定的数据字段。</p> <p><strong>注意：这样的数据绑定只能传递 JSON 兼容数据。</strong></p> <h3 id="组件-template-的-slot"><a href="#组件-template-的-slot" class="header-anchor">#</a> 组件 &lt;template&gt; 的 slot</h3> <p>在组件的 <code>&lt;template&gt;</code> 中可以包含 <code>slot</code> 节点，用于承载组件使用者提供的 CML 结构。</p> <p>支持通过具名插槽的方式在模板中使用多个 <code>slot</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- component-tag-name.cml --&gt;</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>view</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>组件模板的slot<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>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>before<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>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>after<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>slot</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>
</code></pre></div><p>然后在父页面 <code>src/pages/index/index.cml</code>中</p> <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>component-tag-name</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>this is from index<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>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>before<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is before from index<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>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>after<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is after from index<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>view</span><span class="token punctuation">&gt;</span></span>this is from index aaaa<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>component-tag-name</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>
</code></pre></div><h3 id="组件样式"><a href="#组件样式" class="header-anchor">#</a> 组件样式</h3> <p>组件对应 <code>style</code> 标签内的样式，只对当前节点生效。编写组件样式时，需要注意以下几点：</p> <ul><li>组件和引用组件的页面不能使用 id 选择器（<code>#a</code>）、属性选择器（<code>[a]</code>）和标签名选择器，请改用<code>class</code>选择器。</li> <li>组件和引用组件的页面中使用后代选择器（<code>.a .b</code>）在一些极端情况下会有非预期的表现，如遇，请避免使用。</li> <li>子元素选择器（<code>.a &gt; .b</code>）只能用于 <code>view</code> 组件与其子节点之间，用于其他组件可能导致非预期的情况。</li> <li>继承样式，如 <code>font</code> 、 <code>color</code> ，会从组件外继承到组件内。</li> <li>元素选择器不支持</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#a</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span> <span class="token comment">/* 在组件中不能使用 */</span>
<span class="token selector">[a]</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span> <span class="token comment">/* 在组件中不能使用 */</span>
<span class="token selector">button</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span> <span class="token comment">/* 在组件中不能使用 */</span>
<span class="token selector">.a &gt; .b</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span> <span class="token comment">/* 除非 .a 是 view 组件节点，否则不一定会生效 */</span>
<span class="token selector">view</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span> <span class="token comment">/* 不支持元素选择器 */</span>
</code></pre></div><h3 id="样式多态"><a href="#样式多态" class="header-anchor">#</a> 样式多态</h3> <p>CML 扩展了多态样式，用于针对对于不同端有不同的样式需求的情况<a href="/docs/cmss.html#样式多态">参考</a></p> <h3 id="引用外部样式"><a href="#引用外部样式" class="header-anchor">#</a> 引用外部样式</h3> <p><a href="/api/#import">参考</a></p> <h2 id="组件-vm"><a href="#组件-vm" class="header-anchor">#</a> 组件 VM</h2> <p>在 <code>.cml</code> 文件 <code>&lt;script&gt;</code> 代码块 <code>export default</code> 的对象实例，可用于定义组件，指定组件的属性、数据、方法等。</p> <div class="language- extra-class"><pre class="language-text"><code>cml init component
选择普通组件
输入 component-tag-name
</code></pre></div><p>定义如下：</p> <table><thead><tr><th>字段名</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>props</td> <td>Object</td> <td>声明当前组件可接收数据属性 props = { type, default } type 为数据类型，default 为数据默认值</td></tr> <tr><td>data</td> <td>Object</td> <td>CML 模板可直接使用的响应数据，是连接视图层的枢纽</td></tr> <tr><td>methods</td> <td>Object</td> <td>处理业务逻辑与交互逻辑的方法</td></tr> <tr><td>watch</td> <td>Object</td> <td>侦听属性，监听数据的变化，触发相应操作</td></tr> <tr><td>computed</td> <td>Object</td> <td>CML 模板可直接使用的计算属性数据,也是连接视图层的枢纽</td></tr> <tr><td>beforeCreate</td> <td>Function</td> <td>例初始化之后，数据和方法挂在到实例之前 一个页面只会返回一次</td></tr> <tr><td>created</td> <td>Function</td> <td>数据及方法挂载完成</td></tr> <tr><td>beforeMount</td> <td>Function</td> <td>开始挂载已经编译完成的 cml 到对应的节点时</td></tr> <tr><td>mounted</td> <td>Function</td> <td>cml 模板编译完成,且渲染到 dom 中完成</td></tr> <tr><td>beforeDestroy</td> <td>Function</td> <td>实例销毁之前</td></tr> <tr><td>destroyed</td> <td>Function</td> <td>实例销毁后</td></tr></tbody></table> <h3 id="组件间的通信"><a href="#组件间的通信" class="header-anchor">#</a> 组件间的通信</h3> <p>组件间的通信方式有以下几种：</p> <h4 id="父组件-子组件：-props-传递"><a href="#父组件-子组件：-props-传递" class="header-anchor">#</a> 父组件 -&gt; 子组件： props 传递</h4> <p><strong>代码示例</strong></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- index.cml --&gt;</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>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component-tag-name</span> <span class="token attr-name">parent-prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{parent}}<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>component-tag-name</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">class</span> <span class="token class-name">Index</span> <span class="token punctuation">{</span>
  data <span class="token operator">=</span> <span class="token punctuation">{</span>
    parent<span class="token operator">:</span> <span class="token punctuation">{</span> msg<span class="token operator">:</span> <span class="token string">'this is parent message'</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">Index</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 class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- component-tag-name.cml --&gt;</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>view</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>{{ parentProp.msg }}<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>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">class</span> <span class="token class-name">ComponentTagName</span> <span class="token punctuation">{</span>
  props <span class="token operator">=</span> <span class="token punctuation">{</span>
    parentProp<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      <span class="token keyword">default</span><span class="token operator">:</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">ComponentTagName</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><h4 id="子组件-父组件：事件通讯"><a href="#子组件-父组件：事件通讯" class="header-anchor">#</a> 子组件 -&gt; 父组件：事件通讯</h4> <p><strong>代码示例</strong></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- index.cml --&gt;</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>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component-tag-name</span> <span class="token attr-name"><span class="token namespace">c-bind:</span>parentevent</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleParentEvent<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>component-tag-name</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">class</span> <span class="token class-name">Index</span> <span class="token punctuation">{</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">handleParentEvent</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">...</span>args<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">Index</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 class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- component-tag-name.cml --&gt;</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>view</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"><span class="token namespace">c-bind:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<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>view</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">class</span> <span class="token class-name">ComponentTagName</span> <span class="token punctuation">{</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$cmlEmit</span><span class="token punctuation">(</span><span class="token string">'parentevent'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'this is from child'</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">ComponentTagName</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> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/docs/store.html" class="prev">
        数据管理
      </a></span> <span class="next"><a href="/docs/config.html">
        配置
      </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,iVBORw0KGgoAAAANSUhEUgAAAQ4AAAEOCAMAAABPbwmXAAACeVBMVEVHcEwMsvkLpfwKpPwAnP8DoP4Kk/8Pmf8BmP8Dn/4FoP0B2/AAqv8AsfgInv0CyvUPm/4HyfQGyPQMo/wDw/Uqgf0C3fADtvgLpfsEl/85bP8Gz/IEt/gcgv8Hu/YDwvUKpvsdlPsFvPcJvfYMrvkGmP8Pn/wNrfkEr/sIsvkBvfcwdP8Amv8Lnv0LqvsKnf4MoP0Mo/wMpfsE1PIHy/QJxvUNp/sLvPcKvvYNrfoMtfgE1/ELrvoMs/kD2/AIyPQF0fIGz/ID3PAHzfMXhP8KwfUJxfUNr/kF1vELmv8Uh/8NqvoMtvgE2vAB4u4MovwImf8MofwNm/4Ln/0MsPkLt/gC3/ARif8F0/IHzvMDmP8Elv8GlP8Bmf8A4+4QovwKkP8Ikv8NsfkIyfQLufcC4PAMn/0ief8PjP8bf/8KwPULuPg7av8ge/8xev4QqPsNpPxCYP8MtPgL0fIzdf4QoP09Zv8Jw/Ukd/8QpfwQrPoufv0ApP02cv4Im/8A5e4Njf9FXP8PnP4AqfwmdP8PyvMpcv8Zgf84bv4qhv1IVv8xav8Lu/cnivwPsPkNzfNAY/9LU/8rcP8Ou/YTw/UXu/Y5Y/8Kv/YAnv4ilfsljvwubf8Aof4Onv4Zt/cMjv8NvvYcsvgfmfsRxvQQnv0cfv8Otfgbofo0aP8sgv0UwPUPuPcerfkhqPodnfo9Xv8ArftGWf8Whf8jkfxPTv8eff8LxPUMwfYZpfkXqfkWrfgAsvolofsKx/QAx/UVvvUAuPgQs/hBW/8Au/gAy/Q1Zf8AvvcUsfgStvcfff8Ar/oAz/MAtPkAtfkAwPYAwfYAw/YAnP8YkvxCTpRjAAAALHRSTlMAeUp+5R+rA6MxP/oLFcnXh4H0bsTniJBjuez67cLbtFjkpfj6kN7eKMWd0avdkwcAABgVSURBVHja7N35W5TnocZxHUWEghjxXIErVj0arbFYFBAXjjoK6LApwQ0VVMS4oIJVCS6JWuMSUGMiahRNRNyXuNUgWJFik6InZ6t/0bmfZeaZefd1GMB7MO0PmS6ffp/nhWkuMyASFv3B6AHvF8D43auUAe/nxzj0KuU9RwADGu85AhjQeM9BMD4kGId+SXnPwTCYxnsOisE13nNQDK7R7zkEBjT6OwfF4PvtX/2cI24yMGQaWL/HIBpi/R2Daoj1YwyhIdafMTDvxZSQ9TOMtYfWBg8a/ZUjbtzvAKClgfUnjEM6Glh/KkNPA+unZWDp0JCt/5UhNPohR7woQ1cD6+MYYwSGvgbW1zGUlwUNxfVpjMUqS7+SorL+g6GvgfUfDH0NrG9izF1sRQPrXxhYFjTU1ycxVqi/oKG1voZR9JnmfNDQWh/DWKE9aPQXjihg2NPA+gzGSF0Mcm/ore9gLNDV+CJFd/0EA/NBQ3d9ASNrwdwFuoOGgfUFDCNLh0af55gEDEPDvdHnOYAx19hwUvo6BzCKDA4aBtd3MOxrYL0Vw1dkeLhF+zRHvAkMtPFVivFFGdukGDOLJXOPY3KWiaVDo6e3/vjp7EmucYzoVRplm18/e+j1jnTt4kj3GZ63hzXW3Lzw7FlDo9frdS2Pcb1FY/WJO989e/ZseyU05s93K48R6UbXkxrl+ZcbCMazei/VWJXhTh4xvUFjy/HX32HQaEtnGtnZ7uQxptTYPvroD4NX98yDZO+jhoYGyvGX5oBGxjxX8hjh1d+IMUnxA7DoSYnJYbao2HHhSQPVwL7OEBoZGW7k4dHHSPCEfNM2vCR8D5Ktd14/efK6gXs0eYM1KjtiXDgrumWMHRAt+S52SHgeJDmXX2NPnvA6GtrTQzTmzXMhjxHztTcyboB8ScWuW+Qff/SIaJA6nkCj4dsqqcb0OsfzGLtKe+OU3xbr6oEp37L3wiOMaOCo0Dr2ZMs0Fi78xGmOkZoY2WPU3hfrXh9Xd9xhGIE6oHEpXUFjYa7DeUSPyNZagvo7k1x6kNw8eQF7xEDIGqDxpNunoFFXV+dwHokZGqscEa/xVhfu07ITZ38VGKKOz1tVNHKrnM1jZIbWBmp+5p7n8EM1/+idX38Fh7SOJwfmq2nkVjmaR1xHpfqyR2m/eYKTD5KVe0/euQMOhTpafOoa3890Mo+B87T2gfabo8ode5DsuHySaCjV8eeuLC2NmU7mMVpLY2GczruTHcFYv/UsMMChWMfXHdoaMxudyyO+dbrGRuveww48SE4cv4xBQ7mOu14djRkznMvjg4Uaax2n95COsfsgebr37FmioVwHOB76dDVObYx17KzUaS1R9yK29SBZueP4Weyyeh0XGrMMaGx0Ko+oXC2NhR7d7+EGW36QbPn5OAYNjTq+zDCksa3QoTw+zNWc/h1ljaP88NajR49CQ7uO0+nGNJYvdyiP0Zoaj6Pc4Chfn7N571FMr462LKMahbMdebhMqtLa4xT9f5M80w+S/B17MR0O7NfmIsMahbMdyWPyTI09Tikfq/ucNvkgWfnz5s1EQ7+O6mwzGrt2OZHHKC0N/Mcfrvu5opkHyZatOzZjhjiafOY0dtnPIzpmhupOEY3yYQN0Ntzwg+Rwzg7MKEd7kUmNORvs5zHulOr+xG69+AHam2jMYv3Tn39+a5zjZJVpjTlz7OcxaqPaoEE5Bg3QXKyRB0lF/tabN81wHJhvQWPZolibGp5taoMG2+A4ez/B4fI8sXWrOY5LWRY0NixbZjePMctVxjT084jVs9iScwIaJjiwb4qsaSyymUf0qELlQSOw4kkaP7Bo3hxrrj49gZnkuFxnWWORvTzGzlYeNMTKJ6ofl6Fal2d+Tk6OeY67Xusas2bZyiN5l+KYhvBIjjb7kF1dsfIpMCxwtBTZ0Zg1zM5Z+XiO0riG2L+S48x8TlpetiU//6k1jq4FtjQKCmzkkbRBadCQbWKMwnfnycqX5+F8zBrH8Xl2NQps3B6fLFOYkkZ5+erhcZKykgYrXZ7rV4LCKsfpUtsaNvKI+3iRfJkpKhs8KCrorYkTU8rlFltWrrTB8bDItgZm+fZINKYhEhk2ISk2ZlLM2EHJxcCQXp7EwgbH2cIF9jWwTKt5fDJLtjTtb7ZBwv5RalF2dQs07HDszXBEIzMz02Ie8R8XSAcN8ysvW78Fs8GBNfmc0cAs5jHQCY3yNRVXDx+2zdG2wCkNy3kMk2pMM40BC2DY5jh+aoWDGmlpVvKIqskMnUkNXBjrr2L2Od5mO6uRZiWP4bY0YIE5wvEuy1ENbKeFPCamhWyJuQsDFg5x1CxwXGOa+TwmWdSARVkFNBzi2Fu1wnmNadNM5zFhWvCmGj8kFZhjHG+9rmiYz2NisMZSgxYkDCc53hW5o7Fkick8YpYEbalBC8xRjv0r3NL41GQeE6aKGdAoXw0Khzk2133mmsanU83lMdiERjkJw3GOHK+bGlNN5RG7NLApuhZroOE4x8O5bmpgZvIYOsW/VO0LAxiucGxY4bLGJjN5DBYaOmG4wvF2+mK3NZYu9RjW8KT+kMqmYYEyXOLI94VBY4rxPIam8mlYuMdxY0UYNFC+0TyiB2tplAPDNQ6scHF4NAznMfYgm1oYbnJszQiPBpZq8OEyRGjIw3CX411W+DRSjeURXVJMpojhMse6z8KngRnKI6lYoY1yzHWOjWvDqWEwj+Tig2hDiuE+R052mDVKjOQRR86KzMJ9jndFYdUwmkcS/oumhJ8jc3HY20g9eNCjf1agEX6OmWvDrVFSghtSN4/44vKUsHPke3tAIw8cunkkQiPcHO8W9IRGXp6BPIalhJ2jYG3PaMAjL087j7ihVjcEL3zRF76Mb/yhHtHgQx7OL9rOb/8Qfg3uUVycR/KIrCX0gAZGNOBRjDwiadEJ4dcQfWCeCKsjnBolQqO4BHGAY1iEcfSERh40iEfk5ZHQI23k8ToiLo+E8GkcOcIsyEkJaKyJrDwSwqhxxN8GNMpKCEfE5ZEQzjZ4HbDIoxqRl0dC+Nsowx9JHGV5ZdRjWCRxhE1DxAEKDHmwrfZEEEeYNLhHRcm7PPwBFmV4rWEcwyKII3waR/hhIb9ggTgiL4+EMGocYYeljN4fxWXEYw0wVkdQHgnuawgMxoE2YJLHr1JorImcPEaGQYN5gOMd0wAE1aDPFXBEUB4J4dEABh84eB0Eg+aBeSKlDpc1bhy5wdsQJwUrY4kQDZ5HAv2QcsWCueTJT3+rYr4R/o1iS04egldy8lA6fPY3gf2zCRMmk4370L9BfIl8Y/k8sXxRMo3okS5r3LihEAdGLZgG+TUBn7zQz+U+oz9hExSw+Hy+3aW+3WRnznxE/nDm2JnrV/z/jzX5nLgCHwof3rIy/yk+BM/PwqcV5L1ZuAF+++23X3755dWrV//3v//zz3/+4x9///t//9ff/vafjx9/9dVXX3zxxZUrFy8OVqjDfQ180XsDFCyPCsLBv0PnGvyTKMGB/05FRT7iAREOQjSw1isKHPk5J7befOqzzeGixg/QAAY/LFzkHYsD34cBA+Ma1AMYgoNpwAMgRGM3MMCBnbuowrHjhNcuh6sa4OB1iLuDYRTzqxSjGtxDVsdu4sE5eB3Xjz2/qMKx+a3XJoe7bTCQkoBHRQl/qgAjDxhk0Ah40L+9m6ijCBh4hRwWeFx/flGFY+/bDHscLmpQDxEHW5744V5oCA9QcA6fah3UQ4Xj6OZ5tjhcPSn0D5KfWCqggTpkGtwD/+POld0d3IPfHeC43nxRheP40VwbHGPc0ZgCB14HvgIYeJUdwQ8tcg3hUYRbg2j4yJdKHVjnRRWOs2erLHNEj3FJo7aWYIg2/B5YMb7yhIbcIysLIKwOxbuDcpy7l6rCcflyo/U6XNGovVHL62AvoiE+N0YdxTgwXEPukZUFBnBo3B3gONeZqsJx8uR9y3W4oLGpFm3w8T74z28sDaJB+xgux6Ae4Egv9RXBRPXuAMe5xmIVjjt3uqzW4ZJGrT8O5sHKYCDsVXxQaMg88KlDqbeUHRa1OqiHCseFCy8s1uGGxjpxVvhREWeF9oGVEA1VD/axQynRULs7yO4Xq3E8emGtDsc11q0jbdxmIsAgk2DgF9XQ8CglHKtWIY9StTqwe/eL1The37ZUh+MatetC62AebOKo5EFD0wMa4MjGT7Ti7pDVce/em2I1jie3rdThtAbiwOiDVpoHMJjHQT0NeIyeTzkyAKJRx717P1aocTS0WOBwXANtkF84LmSSPJhGyUFo6HtAIzujsjJ7t+rdAY7ON+vVOL67ZJpjnLMa2O11tZCAB6boUXKQauh7QCO7srKyo/KMRh2dnW+GJdP9nrxC9sfxpjkc1diHOPCizxa82H74IfjbMNGGvgeJ41hlR0dHJclDpY7OzvMx8vfS14CoEWY5HG+DcsADHEwDE1dp6kHahlGPDMSBtbYe261ax/nO82p/tT88THI4p7FvH+pgIjfwEocFHgENfGIIDcMejKOVTO3uIHmc96h7mONwTgMcbLWUwx8H6WMK90jF8HuKmvDwczx/ntuhUgc4tDzGm+JwSGMqSQNfbfTyAAnGPcABD66RBw1zHpyD7JhqHed/1PAww+GUxr62fW28DjxahAa9PMifJdow5wENxtHc3HxdrQ7tPkxwOKRRsw8DCeOgcQiNTfTP4xqmPVoFBwNR5PhRvY/4UcY5HNJogwU7LsIjoLGJejANCx6Co7Gx8blyHVrnJTp+lGEOJzRYGgyEr5Z7bNpENZgHNCx6PMeggd1vPKdSh2YfRjmc0KipwWHBSQEGFREeoBAeeMJa9GAazUTj/v03nUpXKQHR6sMYx2QHNIBRAwyMUQiPqZv4uIYNj2bGAQ3snkIden0Y4vjQiTba/TcpPIQI4Qh4UA0bHuDobOQcWOM5JQ7tPgxx2NRYAgzUQUiw0D4+DfKYgnvDlgeN4zw0qEd3d6cix7VrGn0Y4bCpsR8SPI+2NKIR5MH/9E1TmYZtD1FHV1d395t7cg5My8MAh02N/fCgA4jIQ3iw3YCGbQ9xVLrfdHVj5wUHxjC0+9DnsKeBk4JxD5pHSB3cYxM07Hv8AR7srDCNFy+6OyV1MI+x6h66HDY0pu0n82PUpO1La6tZBw+hgQkN+x736dUBDKoBjxdvOgWHX0PTQ4/DnkYNeXEQfAXfHngL8/gUGo550KPyhnKQtb84LzgMeehw2NLAmIe4P9LSWB87l5A34YtoOOfxBmNxMI729u7zkrsDe6DqETdYm8OmBjDaOQgw8AWMtH3Q2AkPMqLhoAfRCMTRDg7sR14HB9H0iIaHFofNNtr3FwTXgfuDnhhoTNu5ZOc0quGsR5c4KlSjra3theTu0OlDg2OQNY2d3+z/hoMUwGO/8CDnBW1QD7wXGg57dHWFxtFGdk2cFs6h1YcGh0WNb6DBV1NQ4MfIBAYphHLg3eug4bhH6NXRxtYujgq+HoBDqw91DqsaixYFPArgQUUycXdk4pW2j3GsG+gshfBgGH6O2223b9++JurQ8UAfqhzWNBCH36OGgtRQDpIHe/dOFEI0XPGAhrg62okH9rANIOLuIEtS70ONw6IG8tgPDwZCOQo4CPPAdkLDJQ/JzUE1sAfII1AH9pOGhwqHaY20LsbRHegDdWC8kMC/AmnDVQ96VEQcBOQ2vTsYh56HIsdA0210dcGD9yH3yORLS4OGux7tGMVgHGw/sTagoeuhyGG6DcLB9yKkjxp8ZfpH2nDZg2tgVIOCtLQ8fBB0WB78pOWhxGFBQ3gskp6XAAeesG57EA1JHC1kbfwu5R6Jqh4TFDisaAiP/coeNdBw3UM8VvxXRwvxuHSphbZxjXPAw/gSzWhk3rrVdYtybPB7QEPiUSDacNuDnRRJHJewhwzDvEeiKQ06yrFBwjELHP6xNtz3mMjiaOM3h+DAQEFAMFMeSSY07t+XeIjLgzbG9zFu0TB5iDqEBttfW/jlYcojOsmEBjj0PTKJRtg8OIeIg2OQvQxovDTskWRcg3MIjw2EA4MFvrgH0Qinh/zmgAb1aMKJMeeBOsxoCA/BQTbLP6YRVg/xWAmto4nsJSiYx0tjHkkGNRrvSz3wsJV7EI0we0ji4HU0UY/Tf+Ua+Eo0xGFQo7FRcNCRh620D9pG2D3Qhrg5/HEwDayFaKAOYx5JRjT+1EimcFyCPfBFNcLvIYsDGITjNB07MQAx4pFkTEPu0SXxwIhGj3mEaPA4CEj96fpLJA/iMUifw5CGlscyeAiNnvGQPFa4Blt9ff1pzqHvkaSv0dzMNTZupByFIccFHvjIZBnT6DkPptEiiYPVgTXBwojHWH0NyiE8CguXw2L2Lnjs2sU9MKLRgx7AkD1WOAZ29259C/PQ+atMPPoaUg/8nfhvFc6Gxy5sAxvV6GEPEUcT1+Ae0MBXkxEPj47G82apx7ZtMo85G3pYAx7/rnhz1PM4sAN3L+l6RHs0Nf6jqkp4MI6N24QHHTCoRo97UA6h0STiqKccBw7U63p4NDWePw/1OLUx4FHIPbA5RCMCPKTfc4ibg3HcrT5w+uUleGjUoa0R6nHqlKIH0YgUD8ljBRNxYNU4MVoeHg2N1lbu8T3zmDEDHBKP2UwjQjyEBllwGwzjQHV1dT0CUfXwaGm05uZSj+/VPWYXEo2I8WAa4qzwOKDBQbADGufFo6Eh85gh9QAI0YggD904sD31qn14VDSWwcKIRxc0IsqDP1YkcbAxjOo9e6qbLil7eFQ0pk835DEeGhHmIY9DaDAP7Mu7yh6xyhodHQEOeOTmwgMYM2eGetwiGpHnweMgddxlcVCQ6kAd4Phyz2klj1gVDUMeRCMCPU6zSeLgabA4CEj1BAUOZQ3usTDgUaXgQTQi1EMcFVkclINtiOy9MXKNOZUdbPjNG5gHxj1m+j1OMY0I9QjVUKiDgnwt84iOUdCo9HsslHpAI+BBNCLXo17yLYdIg8cBDUzqESPTyMiQeeQKDzp4UI0I9hAXh+R7DjKugW0fIqlDrmHIg2hEtIfkZ5UAhuAAiKyPGIlGdrbMAxx1Uo/xH0Sog/DgcfD57w2hwerYHuoRE6qxKjvYY17HdHad1kk8iEbEezCNu4pxQIOAbIdHyHmJCdVYFewxb56ix/dUo7d4MI0DkjhAwTSwb4M8YoI0ds1fFeIxD5uu4MHujcj3+Ddo0HEN2cWxnXp8vv33gfdMCtaYL/foYB51WC4HERqR78HjCPruXBoHND7/HB6cI6Ax2zvfiEcdOSm9xiMoDvnFEeAQHlF+jeVer98jW92jLpdo9C4PVgZeQoPXEdD49lvmER0lNGQelVIP3CBEo3d5VHMP2cXBNDBw+D2iuEZpqdyjUurBNHqZR3WoBiaPAx5/hgfqYBrp6boeWOsIaPQ6D64hvUfZeBzgoB5RXMOQB9HonR7yb0d5HKwN5vFHxrHc59P2wOBBNXqnxx72kFVuw68BD8Lx/+3YMW7CQBCF4SpV+hThCBQ5ABIiVDRQolQ0USpotqFFbqnso6zECXKyvNkZM+yuDZTxjp9v8Olfe+X9aiUei34PgJDGQD2Sk4LlGsHj5WM/m7Ueizse36QxZA/WiL4qfFaUo6qm0HjKgzQG7aGfWLw4GCPW+HWVO65nucdn7kEaw/bIXxwH1ZA4quP6oQfGGsP2UA08cRyMIRxP9DGBRgEe+o8jbUPrSDy+OjxIowAPjiNvQ+Pw4FAPaGQeolGKByiS+5e2gdXrhx6kUY7HIY5D22CO+SMP0ijGI7qcJ21gvp4/8CCNgjz0+sVnJWrD+3rZ64GxRnkehMEaURvEcdeDNMrzkDRyjbNb9nqIRnEeelIyDXD0eYhGoR41LdXgOnIPHmkU6SEYqQbmtt0eolGoRx2Wanji6PFYTd4KlFAP12o40ZA6ejxeoVGux3vahnBU224P0ijaw9XcRqTRgKPLgzRK94CG0ziCBurIPVjDgEcVphgN1ZF7kIYBD9XwV46fxEM0zHj42zjAkXiwhh0Pj4kGcWxSD9Kw4xG1QRyJB2kY8og5LuBQD9Gw5SEYQaPxm8iDNIx5MAdrXDxpXD2W0LDnoRrEIX2IhkUPOSl4zqwBD9Yw6SEa2Hm3ufYBDaMewIBGQxw76YM0DHu0dcAjDBqGPaDBHJh1jeAR1uxo1jWCh3KY12g9mlHj1qM5gWPUEA9wnEYN9QDHqKEezahx6zH9Jxp/44jqGDUVB+sAAAAASUVORK5CYII=" 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
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
237 
    <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/75.80730e6c.js" defer></script><script src="/assets/js/2.d28a060e.js" defer></script>
J
doc: update  
JiM-W 已提交
238 239 
  </body>
</html>