扩展组件的进阶与实战

概述

本文将带领大家搭建一个数据展示类的组件，通过配合平台已有的功能，该组件能：

• 直接呈现平台对接过来的数据源；
• 通过插槽拖拽的形式，自定义首尾功能区的组件
• 设置属性之间可以控制关联的显示和隐藏

代码地址如下：https://github.com/vusion/lcap-usage-demo (opens new window) ，用户可以直接clone到本地进行开发与调试

对接平台数据源

扩展组件最常见的需求就是对接平台的各种数据源，这种数据源结构类型各异，包括Array<Item> | Function | Object 等，普通用户分别处理起来可能会比较麻烦，这里专门封装了一层supportDatasource的Mixins， 以便需要处理数据源的用户，直接复制文件引入。使用时，直接在组件内遍历innerDataSource的数据即可，建议使用前参考一下support.datasource.js的源码，以防止命名覆盖，功能失效。

import supportDatasource from "@/mixins/support.datasource";
export default {
    mixins: [supportDatasource],
};

同时需要在api.yaml中需要添加以下两个属性，其中data-source用于数据源的绑定，data-schema用于返显绑定数据源的类型，由于平台某些功能会识别data-source和data-schema这个这两个字段进行处理，所以属性name名称不能修改，有需要建议仅修改属性title

  attrs:
    - name: data-source
      title: 数据源
      type: Array<Item> | Function | Object
      description: 集合类型变量或者输出参数为集合类型的逻辑
      designer-value: "[{}, {}, {}]"
      group: 数据属性
    - name: data-schema
      title: 数据类型
      type: schema
      description: 集合类型每一元素的数据类型
      group: 数据属性
      compType: dataTypeSelect

插槽的使用

通常情况下，当需要户某一部分区域可以拖拽放入组件时，这时就可以用到显示插槽空缺的 SEmpty 组件，下面的例子中平台上的“+”号插槽会在，插槽内为空且defaultHeader没有内容，且在平台时才会显示。

<div vusion-slot-name="head">
    <div>{{defaultHeader}}</div>
    <slot name="head"></slot>
    <s-empty v-if="!$slots.head
                   && $env.VUE_APP_DESIGNER
                   && !defaultHeader
                   && !!$attrs['vusion-node-path']">
    </s-empty>
  </div>
</div>

注意组件使用前，单独引用一下 SEmpty 这个组件

import {SEmpty} from 'cloud-ui.vusion/src/components/s-empty.vue';
export default {
    components: { SEmpty },
};

属性的关联显示

当一个组件存在大量属性时，我们肯定不希望所有属性一股脑全部显示出来。尤其是属性之间存在关联关系，比如：某个属性值为特定的值的时候，才显示另一个属性，亦或是某一个属性的值发生改变时，同步去修改该组件的另一个属性。当你有以上需求时，可以参考以下几个例子。

• 这里属性A是一个普通的Boolean属性，他将会影响属性B，C的显示。

    - name: attr-A
      title: 属性A
      type: boolean
      default: true
      description: 属性A控制下方属性B和属性C的显示
      group: 关联属性

我们通过dependency属性，控制属性B受A的影响，这里只有属性A为true时，属性B才会显示。

    - name: attr-B
      title: 属性B
      type: string
      default: ''
      description: 属性A为true时，属性B显示
      dependency:
        - attr-A: true
      group: 关联属性

同时dependency支持数组的形式，存在多个值的时候，条件为且的关系，即下面的例子中：属性A为false时，且属性B为空，属性C显示。

    - name: attr-C
      title: 属性C
      type: string
      default: ''
      description: 属性A为false时，且属性B为空，属性C显示
      dependency:
        - attr-A: false
        - attr-B: ''
      group: 关联属性

通过toggleupdate我们可以控制当前属性发生修改时，其他属性的值发生怎样的改变，下面的例子中：属性D为true时，设置属性B的文本；属性D为false时，清空属性B的文本。

    - name: attr-D
      title: 属性D
      type: boolean
      default: false
      description: 属性D为true时，设置文本；属性D为false时，清空文本
      toggleupdate:
        - value: true
          updateData:
            attr-B: '属性D为true时，修改属性B的值'
        - value: false
          updateData:
            attr-B: ''
      group: 关联属性