Naughty Platypus Memorabilia

    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

    Install

    npm i easy-comps

    DownloadsWeekly Downloads

    10

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    30.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • ninja008