# study

**Repository Path**: duckking/study

## Basic Information

- **Project Name**: study
- **Description**: 项目学习的仓库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-01-28
- **Last Updated**: 2023-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# oatest

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### 使用的重要 第三方组件
~~~
vuedraggable -- 拖拽组件
~~~

># 关于代码
~~~~
1.代码的思路讲解
~~~~

>## 代码入口 -- APP.Vue
```javascript
1.在 APP.Vue 会去自动注册 './components/customPage/pageCmp' 下的组件
```
>## 关于'customPage/pageCmp' 目录说明
```javascript
1.该目录下的 .vue 文件是用来声明可拖拽的组件
2.每个组件 都会在App.vue去触发自动注册组件的时候 触发他们的装饰器方法 CustPageComponent，
  其中装饰器规定参数对象，需求声明当前组件的一些基本信息  
3.'CustPageComponent'方法会将这些类的信息 依次存到 'elementComponentDict'、'mdlCmpDesignInfo'、 'smdlClsNameDesignInfoDict'
 3.1.'mdlCmpDesignInfo' 将会保存这些组件装饰器传进来的详情信息，这些详情信息将会展示页面布局左侧区域
 3.2.'elementComponentDict' 存储配置类名字为key，对应vue组件名为vale
```
>## 关于 './layout/ComponetList.vue' -- 左侧区域
```javascript
1.左侧区域利用存储在 'mdlCmpDesignInfo' 中的组件信息进行数据展示
```
>## 关于 './layout/PageEditor.vue' -- 中间编辑区域

```javascript
1.左侧区域和编辑区域用了组件 -- vuedraggable 进行了包裹，这里使用他们官方案例中的'clone' 案例有兴趣可以下载看看看官方案例
2.左侧区域信息都存储到了'mdlCmpDesignInfo'中，因此拖拽到中间区域时候触发'vuedraggable' 的change事件就可以拿到拖拽组件详细信息
3.中间区域'change' 事件到底做了什么? 我们从'mdlCmpDesignInfo'中获取当前被拖拽组件通过'CustPageComponent'存的详情信息，
在去实例化注对应组件声明的配置类，这些配置类被统一放在了'./model/customPage'文件下
    onChange(evt: any) {
        const added = evt.added
        const ele = added.element
        const eleObj: BasePageMdl = new ele.elementClass()
        this.custPage.children.push(eleObj)
    }
4.现在中间编辑区域将这些实例存起来，但是要在中间区域显示我们的组件我们利用VUE'is'特性去动态渲染组件，这时候就用到
 './model/customPage'下的文件 继承的'BasePageMdl',这个会去做两件事一件事，一件事是通过当前的配置类去找到他对应
 vue文件，也就通过'elementComponentDict'，存储的字典关系找到vue组件名字，然后在利用'is'进行渲染

```