快速开始

本文档通过自定义高代码组件实现「展示循环卡片」功能的小案例，体验一下自定义高代码组件开发调试以及安装使用的具体操作。

案例场景

使用高代码组件功能，在脚手架中自定义展示卡片的样式和配置属性，将高代码组件导出并安装到盘古公共开发平台后，用户可根据配置属性设置循环卡片的展示数据。

实现效果

操作步骤

步骤 1：创建高代码组件

1、盘古公共开发平台 >> 物料中心 >> 页面组件开发

2、新增 >> 填写组件名称、组件编码、组件类型等组件属性，选择开发类型为高代码 >> 确定

步骤 2：开发调试高代码组件

1、拉取脚手架。本地拉取pangea-component-vue3脚手架，gitlab地址：http://gitlab.hisense.com/Pangea/Pangea-Cloud/frontend/pangea-vue3-project/pangea-component-vue3.git，脚手架/src/components/文件夹下，每个高代码组件都应包含以下三个主要文件：

index.ts - 组件打包入口文件；
config.ts - 用于配置高代码组件的组件属性；
index.vue - 用于开发高代码组件的视图；

2、配置属性。在config.ts中配置高代码组件属性，属性配置可参考低代码扩展组件详细配置介绍。该组件需要对外暴露出卡片标题、卡片描述、图片地址、事件配置、循环数据等属性，如下所示：

const config = [
  {
    label: "属性",
    type: "tab",
    coms: [
      {
        type: "select",
        col: "status",
        label: "默认状态",
        default: "default",
        bindParam: true,
        props: {
          options: [
            {
              key: "default",
              value: "默认",
            },
            {
              key: "hide",
              value: "隐藏",
            },
          ],
        },
      },
      {
        type: "input",
        col: "cardTitle",
        label: "卡片标题",
        default: "",
        bindParam: true,
        placeholder: "请输入卡片标题",
      },
      {
        type: "input",
        col: "cardDesc",
        label: "卡片描述",
        default: "",
        bindParam: true,
        placeholder: "请输入卡片描述",
      },
      {
        type: "input",
        col: "src",
        bindParam: true,
        label: "图片地址",
      },
      {
        label: "事件配置",
        type: "collapse",
        default: "open",
        coms: [
          {
            type: "events",
            col: "events",
            props: {
              eventList: [
                {
                  name: "点击事件",
                  method: "onClick",
                  type: "js",
                },
              ],
            },
          },
        ],
      },
    ],
  },
  {
    label: "样式",
    type: "tab",
    coms: [
      {
        type: "style",
        col: "baseStyle",
        label: "CSS样式",
      },
    ],
  },
  {
    label: "高级",
    type: "tab",
    coms: [
      {
        type: "loop",
        col: "loop",
      },
    ],
  },
];

3、视图实现。在index.vue中配置高代码组件的视图，其中useVarsRefs()方法用于获取用户在设计器右侧对该组件配置的各属性值

vue

<template>
  <div class="card" @click="onClick">
    <div class="image">
      <img :src="src" />
    </div>
    <div class="text">
      <h2>{{ cardTitle }}</h2>
      <p>{{ cardDesc }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useVarsRefs } from "pangea-ui/hi-use-vars";
import { createEventsHandlers } from "pangea-ui/hi-use-events";
import { useNodeRef } from "pangea-ui/hi-use-node";

interface Props {
  node: any;
  loopIndexList?: any[];
}

const props = defineProps<Props>();
// 可以获取设计器中的代理节点
const nodeRef = useNodeRef(props);

// 获取组件配置属性
const { status, cardTitle, cardDesc, src, loop } = useVarsRefs(props, {
  keys: ["status", "cardTitle", "cardDesc", "src", "loop"],
});

// 获取事件句柄
const { onClick } = createEventsHandlers(() => nodeRef.value.props.events, {
  keys: ["onClick"],
  loopIndexList: props.loopIndexList || [],
});
</script>
<script lang="ts">
export default {
  name: "TestCom",
};
</script>

<style lang="less" scoped>
.card {
  background-color: #eef1ff;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 10px;
  width: 220px;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
  height: 100px;

  .image img {
    width: 60px;
    height: 60px;
    background-color: #d6d9e6;
    margin-right: 10px;
    border-radius: 50%;
  }

  .text {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    h2 {
      margin: 0;
      color: #000000;
    }
    p {
      margin: 2px;
      color: #bbb5c9;
    }
  }
}
</style>

4、导出组件。在/package.json中新增一条组件的打包命令，如下图所示，build:后的值可进行自定义设置，CODE值设置为该组件在物料中心定义的组件编码，组件编码由systemname和用户自定义的编码两部分组成；ENTRY值设置为该高代码组件对应的index.ts打包入口文件的相对地址。

执行npm run build:自定义命令，导出高代码组件（.umd.js文件）到/dist中

步骤 3：上传自定义组件

盘古公共开发平台 >> 物料中心 >> 页面组件开发 >> 开发 >> 填写组件的三段式版本号、发布说明、脚手架中导出的.umd.js文件 >> 确定

步骤 4：安装自定义组件

1、盘古公共开发平台 >> 物料中心 >> 页面组件安装 >> 安装管理 >> 跟据环境点击对应的安装按钮

2、选择需要安装的版本 >> 确定

3、相应环境下的页面设计器中即可使用该组件

步骤 5：使用自定义组件

1、页面设计器 >> 左侧工具栏 >> 组件库 >> 自定义，找到已安装的高代码组件，拖到中间可视编辑区

2、添加变量cardData：

[
  {
    cardtitle: "商家论坛",
    carddesc: "百万商家互通互助",
    src: "https://cdn.icon-icons.com/icons2/4241/PNG/96/binance_coin_bnb_crypto_icon_264360.png",
    jumpPage: "/indexPage",
  },
  {
    cardtitle: "线下培训",
    carddesc: "点击查看全国活动",
    src: "https://cdn.icon-icons.com/icons2/4241/PNG/96/exchange_bitcoin_crypto_icon_264365.png",
    jumpPage: "/appDevelopment/appManage",
  },
  {
    cardtitle: "服务市场",
    carddesc: "服务商帮你运营",
    src: "https://cdn.icon-icons.com/icons2/4241/PNG/96/monero_crypto_icon_264366.png",
    jumpPage: "/materialCenter/pageComponentDevelopment",
  },
];

3、为卡片标题绑定item.cardtitle,卡片描述绑定item.carddesc，图片地址绑定item.src，添加点击事件

function action(ctx, params, item) {
  ctx.injected.navigateTo(item[0].row.jumpPage);
}

npm包方式

微应用方式

事件

表单

表格

布局组件

基础组件

表单组件

高级组件

图表组件

布局组件

基础组件

表单组件

高级组件

组件实战案例

离线打包

快速开始

案例场景

实现效果

操作步骤

步骤 1：创建高代码组件

步骤 2：开发调试高代码组件

步骤 3：上传自定义组件

步骤 4：安装自定义组件

步骤 5：使用自定义组件

快速开始 ​

案例场景 ​

实现效果 ​

操作步骤 ​

步骤 1：创建高代码组件 ​

步骤 2：开发调试高代码组件 ​

步骤 3：上传自定义组件 ​

步骤 4：安装自定义组件 ​

步骤 5：使用自定义组件 ​

快速开始

案例场景

实现效果

操作步骤

步骤 1：创建高代码组件

步骤 2：开发调试高代码组件

步骤 3：上传自定义组件

步骤 4：安装自定义组件

步骤 5：使用自定义组件