# ele-componets

**Repository Path**: someboss_someboss/ele-componets

## Basic Information

- **Project Name**: ele-componets
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-12
- **Last Updated**: 2021-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目结构

![image-20210909170316153](C:\Users\17637\AppData\Roaming\Typora\typora-user-images\image-20210909170316153.png)

项目源码在src目录下：

assets：存放静态资源文件，如css，图片。

components: 所有的组件在此目录下。

static: 此目录下存放渲染各页面的js。

# 页面渲染教程

## 1、创建页面js文件

当新增一个页签时，首先需要创建一个以**页签名**命名的js文件，并将该文件放在static目录下。

## 2、页面js文件编写规范

![image-20210909171527895](C:\Users\17637\AppData\Roaming\Typora\typora-user-images\image-20210909171527895.png)

上图所示为页签名为personInfo的js文件，页面整体分为以下三个部分。

### 第一部分

引入基础类库，如上图中1-7行。

### 第二部分

定义名为**页签名Data**的常量并加上export修饰符将该常量导出，页面中需要用到的变量都以键值对的形式定义在该常量中。

### 第三部分

定义名为**页签名Methods**的常量并加上export修饰符将该常量导出，页面中需要用到的方法都以键值对的形式定义在该常量中。

这样，整个js文件的变量都定义在第二部分、方法都定义在第三部分。同时，第二部分与第三部分都被导出，因此对于引用页面的程序来说可以非常方便的通过页签名找到需要的变量或方法。因此请务必按照此约定编写页面js。

## 3、页面可渲染区域

##    ![](C:\Users\17637\AppData\Roaming\Typora\typora-user-images\image-20210911100141875.png)

主程序会为每个页签创建id为**页签名PageId**的容器，即上图中红框内区域。各页面js的任务就是对上图灰色区域部分进行渲染。

## 4、容器分割函数

在确定了页面可渲染区域后，下一步就是对区域的渲染。在渲染页面前经常会对区域进行各种各样的分割，util.js中提供了几种基本的容器分割函数，如下表：

| 方法名            | 说明               |      | 参数         | 参数说明  |
| ----------------- | ------------------ | ---- | --------------------------------------------------------- | ------------------------------------------------------------ |
| createBoxAbsolute | 绝对定位创建容器， |      | parentId,id,left,top,width,height                         | parentId：父容器ID；id：新创建容器ID；left：左边距；top：右边距；width：容器宽度；height：容器高度； |
| createBox         | 创建容器           |      | parentId,id                                               | parentId：父容器ID；id：新创建容器ID；                       |
| lrSplit           | 左右方向上分割容器 |      | targetId,leftWidth,leftBoxId,rightBoxId,resize,splitColor | targetId：需要分割的容器ID；leftWidth：分割后左侧容器宽度(右侧容器宽度为要分割容器宽度-左侧容器宽度)；leftBoxId:左侧容器ID；rightBoxId:右侧容器ID； |