easy-comps

1.0.3 • Public • Published

使用

//使用步骤:
//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

Package Sidebar

Install

npm i easy-comps

Weekly Downloads

0

Version

1.0.3

License

ISC

Unpacked Size

30.9 kB

Total Files

21

Last publish

Collaborators

  • ninja008