easy-comps

使用

//使用步骤：
//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生成的数组
              <C_InfoPanel ref="panel" :col="[1]" :row="[1]" style="width:300px;height:300px;border:solid;">
                <template #default="{ infos }">
                  <grid  :infos="infos"/>
                </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