easy-comps/C_InfoPanel/README.md

基于element-ui、vue2的便于使用的封装组件

### 使用
```js
//使用步骤：
//1、引入并注册到components上，元素的宽高可通过style属性设置
import {C_InfoPanel} from "easy-comps";
//2、布局到html中
<div class="infoPanel card">
  <C_InfoPanel ref="infoPanel" :col="3" :row="120"/>
</div>;
//3、初始化配置：配置的设置见opts-example(使用默认样式时，可不使用form.js)
import * as settings from "./opts-example";
this.$refs.infoPanel.init({ ...settings,mode:'grid' });
//4、设置渲染数据
this.$refs.infoPanel.setData(infoList);
//infoList必须为对象，示例：
// const infoList = {
//     birthday: "1965-08-21",
//     id: 2,
//     name: "王文林",
//     sex: 1,
//     uploadTime: "2022-01-20 11:21:03"
// }
//5、 form为grid时：infos为根据order生成的数组,每个字段对应的数组(如order:['name','age'],解析后name处对应[解析key:解析value])均含有一个original属性，其值为[originalkey,originalvalue],即包含有原key和原value
              <C_InfoPanel ref="panel" :col="[1]" :row="[1]" style="width:300px;height:300px;border:solid;">
                <template #default="{ infos, index }">
                  <Grid :infos="infos" :index="index" />
                </template>
              </C_InfoPanel>
```
### 元素属性
1. row/col分别设置行、列：col默认5列等宽；row默认为120px; 两属性仅在form为grid模式下生效
   1. 两者的取值均只能是number或string或number[]或string[],string只能是数值string
   2. col的所有设置均为fr,非数组时，值指定的是多少列（每列等宽）；数组时，数组长度即多少列，元素值则为每列的fr
   3. row的值为非数组时，设置的值为px(每个row高度)，其他都是设置为fr;所以设置row等高时，必须[1],而不是1

### 文件配置
#### dict.js
1. transValueList里是所有需要翻译的字段
   1. transValueList里的字段exp，但没有相应的trans_exp时，使用trans_def进行翻译
#### slots
1. mode为grid时，可以获得default slot，并暴露两个属性：infos和index；
   1. infos即根据orders或infoList翻译后的数组：[k:v],若存在多维数组order:
   2. 如[['a','b']]=>infos则为['a','b']翻译后的数组：[[k,v],[k,v]]
   3. 若order为一维数组，或order为空数组，则infos为数组内每个元素对应的翻译后的数组：[k,v]
2. mode为grid或from或''时，存在header、footer slot，暴露两个属性：
   1. formedInfoList="formedInfoList" :excludes="excludes"
   2. formedInfoList即完整的翻译后的多维数组：
      1. 如 如[['a','b']]=>infos则为[['a','b']]翻译后的数组：[[[k,v],[k,v]]]
      2. 若order为一维数组['a']，或order为空数组，则为：[[k,v]]
   3. excludes为传入的excludes数组