扩展新端组件

组件分为内置组件chameleon-ui-builtin和扩展组件cml-ui。所以用户需要创建两个npm包分别实现这两个组件库,结构参考cml-demo-ui-builtincml-demo-ui。利用多态组件扩展语法,对原有组件库中的每一个组件进行新端的实现。

原有组件库中的组件也分为两种,一种为各端都有分别实现的多态组件,例如chameleon-ui-builtin中的button组件。实现起来新端基本上也是要单独实现。另一种例如chameleon-ui-builtin中的radio组件,各端的实现都是用的chameleon-ui-builtin/components/radio/radio.cml。所以新端基本也可以复用这个实现,(还需要测试情况确实是否可以复用)。

新端独立实现

例如:

编写 my-ui-builtin/components/button/button.interface

// 引入官方标准interface文件
<include src="chameleon-ui-builtin/components/button/button.interface"></include>

编写 my-ui-builtin/components/button/button.demo.cml

<template>
  <origin-button 
    class="cml-btn" 
    c-bind:tap="onclick" 
    style="{{mrBtnStyle}}" 
    open-type="{{openType}}"
    lang="{{lang}}"
    session-from="{{sessionFrom}}"
    send-message-title="{{sendMessageTitle}}"
    send-message-path="{{sendMessagePath}}"
    send-message-img="{{sendMessageImg}}"
    show-message-card="{{showMessageCard}}"
    app-parameter="{{appParameter}}"
    c-bind:getuserinfo="getuserinfo"
    c-bind:contact="contact"
    c-bind:getphonenumber="getphonenumber"
    c-bind:error="error"
    c-bind:opensetting="opensetting"
    >
    <text class="btn-text" style="{{mrTextStyle}}">{{text}}</text>
  </origin-button>
</template>
<script>
// js实现部分
</script>
<style scoped>
// 样式部分
</style>
<script cml-type="json">
// json配置
</script>

新端复用现有组件

编写 my-ui-builtin/components/radio/button.interface

// 引入官方标准interface文件
<include src="chameleon-ui-builtin/components/radio/radio.interface"></include>
// 复用官方的实现
<script cml-type="demo" src="chameleon-ui-builtin/components/radio/radio.cml"></script>

results matching ""

    No results matching ""