快速开始

本文档通过自定义组件实现「文本复制」功能的小案例，体验一下自定义组件开发调试以及安装使用的具体操作。

案例场景

使用自定义组件功能，对盘古现有的文本组件进行低代码改造，实现文本复制功能。用于文本内容复制到剪切板，便于用户进行重复字段的填写。

实现效果

操作步骤

步骤 1：创建自定义组件

通过对组件名称、类型、标识等属性的配置，低成本、自定义一款更贴合业务需求的组件

1、盘古公共平台 >> 资产开发 >> 组件编排（操作如下图所示）

2、新增组件 >> 填写组件名称、组件编码、组件类型等组件属性 >> 确定

步骤 2：开发调试自定义组件

对组件进行开发调试，以满足不同的业务需求。本案例中实现文本的复制功能

1、组件编排 >> 找到需要调试的组件 >> 开发

2、组件由视图和属性构建，当开发一个组件时需要先抽象出这个组件所需要的属性，我们先来构建组件的属性，该组件只需要一个文本内容的属性，属性配置 >> 属性定义，添加一个输入框类型的属性配置项，名称为 text。详细配置介绍

3、组件属性构建完成后，来构建组件的视图，添加所需的组件到画布中（本案例所需组件为两个文本和按钮），并进行基本属性的配置，将文本组件的内容进行变量绑定，绑定为刚才构建的属性 props.text, 这样就可以在运行时显示传过来的属性值。

4、为按钮组件进行动作设置，实现文本复制效果。选中按钮配置onClick事件

5、在 JS 面板进行复制逻辑的编写。

6、调试自定义组件

7、先保存，后发布(填写组件发布的版本号及相关说明)

步骤 3：安装自定义组件

将开发调试完成的自定义组件，安装到页面内，即可在页面设计的过程中进行使用。

1、盘古公共平台 >> 环境配置 >> 组件管理

2、选择需要安装的自定义组件 >> 安装 >> 选择版本

3、盘古脚手架项目即可在对应的项目环境下使用自定义组件，非盘古项目按照自定义组件集成方式集成后也可以使用