# low-code-components

**Repository Path**: namecho/low-code-components

## Basic Information

- **Project Name**: low-code-components
- **Description**: 低代码平台 - 组件开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-12
- **Last Updated**: 2023-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 低代码平台 - 组件开发

### 组件文件介绍

| 文件名 | 简介 |
| ---- | ---- |
| component-libraries | 组件相关文件 |
| component-libraries/components | 组件库 |
| component-libraries/bootstrap.js | 组件引导程序 |
| component-libraries/componentConfig.js | 组件全局配置文件 |
| component-libraries/ComponentManager.js | 组件实例工具函数 |
| component-libraries/componentMixin.js | 组件公共混入 |
| component-libraries/optionComponentMixin.js | 组件配置公共混入 |
| component-libraries/dataOptionTemplate.vue | 组件数据配置模板 |
| component-libraries/eventOptionTemplate.vue | 组件事件配置模板 |
| component-libraries/components/**/index.vue | 组件文件 |
| component-libraries/components/**/config.js | 组件配置 |
| component-libraries/components/**/option.js | 组件配置模板 |


### 组件开发文档

开发一个组件需要在 `component-libraries/components` 创建一个组件文件夹，文件夹格式为 `Wbi***`，文件夹至少包含三个基本文件 `index.vue` `option.vue` `config.js`。

#### index.vue

```javascript
<template>
  <div v-bind="componentData.attribs" v-on="events" :text="text">
    <slot :name="componentData.slotName"></slot>
  </div>
</template>

<script>
import componentMixin from "@/component-libraries/componentMixin";
export default {
  name: "Wbi***",
  props: ["componentData"],
  mixins: [componentMixin],
  return {
    text: this.componentData.data.find(
      (obj) => obj.type === "buttonText"
    ).data,
  };
};
</script>

<style lang="scss" scoped></style>
```

1. 组件必须要有 name 属性，属性值格式为与当前组件文件夹一致。

2. 必须通过 prop 获取组件数据 `props: ["componentData"]`。

3. 混入组件公共属性 `mixins: [componentMixin]`。

4. 如果组件具有插槽属性，则通过 `<slot :name="componentData.slotName"></slot>` 预设插槽。

5. 属性绑定，可通过 `v-bind="componentData.attribs"` 进行一次性绑定，也可分条绑定，看具体业务。

6. 事件绑定，可通过 `v-on="events"` 进行一次性绑定，也可以分条绑定，看具体业务。

7. 如组件配置具有 data 属性，则必须在组件内部将数据映射在 data 属性内
```javascript
this.componentData.data.find(
  (obj) => obj.type === "text" // 字段名称和数据名称一致
).data
```

#### config.js

```javascript
{
  // 基本配置
  option: {
    title: "", // 组件名称
  },
  slotName: "", // 可配置插入的组件插槽名称
  // 可配置组件数据
  data: [
    {
      label: "", // 数据名称
      type: "", // 数据键
      data: "", // 数据默认值
      dataType: "string", // 数据类型，string、number、boolean
      bindVariable: "", // 绑定变量名称
      init: true, // 当绑定变量时，是否初始化加载数据
    },
  ],
  // 可配置标签属性
  attribs: {
    style: {}, // 可配置样式
  },
  // 可配置事件列表
  events: [
    {
      type: '', // 事件类型
      callback: '' // 事件体
    }
  ],
};
```

#### option.vue
```javascript
<template>
  <div>
    ...
  </div>
</template>

<script>
import optionComponentMixin from "@/component-libraries/optionComponentMixin";
export default {
  name: "WbiButtonOption",
  mixins: [optionComponentMixin],
};
</script>

<style lang="scss" scoped></style>
```

1. 配置模板必须要有 name 属性，属性值格式为与 `Wbi**Option`。

2. 混入配置模板公共属性 `mixins: [componentMixin]`。

3. `currentComponent` 当前组件数据，所有配置修改都是对此数据进行修改。

3. `<data-option-template :componentData="currentComponent"></data-option-template>` 数据配置模板。

4. `<eventOptionTemplate :componentData="currentComponent"></eventOptionTemplate>` 事件配置模板。

### 组件集成

#### 代码集成

1. 在 `src/component-libraries/bootstrap.js` 进行组件模板注册。

> 注册名称规范为和组件 `name` 一致。

2. 在 `src/component-libraries/componentConfig.js` 进行组件配置注册。

> 注册名称规范为和组件 `name` 一致。

#### 打包

修改入口文件，屏蔽调试相关代码。

主文件修改后为：

##### main.js
```javascript
import Vue from 'vue';
import "tailwindcss/tailwind.css";
import "./assets/styles/componentOption.scss";
import bootstrap from "./component-libraries/bootstrap";
Vue.use(bootstrap);
```

##### 执行打包命令

`yarn build` OR `npm run build`

##### 文件集成

生成的打包文件为 `dist/main.js`。

放入平台全局引入即可。