paas-comps

@wpg/paas-comps 是一个 PaaS 组维护的前端组件库

开发指引

安装依赖

 npm install --save @wpg/paas-comps

使用

全局配置每一项为选填，默认值为如下，按照全局->组件 props->默认值的顺序作用

import wpgInfoComps from "@wpg/paas-comps";
import "@wpg/paas-comps/index.less";

Vue.use(wpgInfoComps, {
  table: {
    tableTool: false,
    resize: false,
  },
  search: {
    layout: {
      itemSpan: 6,
      labelWidth: 72,
      minBtnSpan: 6,
    },
  },
});

搜索组件

1. 使用示例

  <w-info-search @search="handleSearch" @reset="handleReset">
      <w-info-search-item label="标签11111111111111">
        <w-input placeholder="请输入内容"></w-input>
      </w-info-search-item>
      <w-info-search-item label="标签11111111111111">
        <w-input placeholder="请输入内容"></w-input>
      </w-info-search-item>
      <w-info-search-item label="标签11111111111111">
        <w-input placeholder="请输入内容"></w-input>
      </w-info-search-item>
      <w-info-search-item label="标签11111111111111">
        <w-input placeholder="请输入内容"></w-input>
      </w-info-search-item>
      <w-info-search-item label="标签11111111111111">
        <w-input placeholder="请输入内容"></w-input>
      </w-info-search-item>
      <w-button slot="extra">aaaaaa</w-button>
      <w-button slot="extra">aaaaaa</w-button>
    </w-info-search>

2. search 组件传入值

props 属性	可填值	作用
minBtnSpan	6	设置按钮的最小 col 数
notMargin	false	取消底部 margin

插槽 extra

3. search-item 组件传入值

props 属性	可填值	作用
label		标签名
span	6	单个的 col 数
labelWidth	72	标签宽度

表格组件

1. 使用示例

<w-info-table
      rowKey="key"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps: (record) => ({
          props: {
            disabled: !record.date,
          },
        }),
      }"
      :dataSource="tableData"
      v-model="columns"
      :page="page"
      @changePage="handleChangePage"
      @changeTable="handleChangeTable"
    >
      <w-button type="danger" slot="tableTool">删除</w-button>
      <w-button type="primary" slot="tableTool">编辑</w-button>
      <w-button type="primary" slot="tableTool">新增</w-button>
      <template slot="action" slot-scope="text, record, index">
        <a href="javascript:;" @click="handleEdit(record)">编辑</a>
      </template>
    </w-info-table>

props 属性	可填值	作用
page	{currentPage: 1, pageSize: 20,total: 100}	分页
customCols	true 或者{show:true,position:right}	表格列工具
resize	false	可拖拽列
notMargin	false	没有工具栏时的顶部的 margin

插槽 tableTool

事件 changePage（分页器变化时触发） changeTable（表格变化时触发）

颜色和样式

表格页面容器类 .w-info-page

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.paas-card { background-color: var(--paas-bg); } .paas-card2 { background-color: var(--paas-bg2); } .paas-text { color: var(--paas-text); } .w100 { width: 100%; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mr10 { margin-top: 10px; } .mr12 { margin-top: 12px; } .mr15 { margin-top: 15px; } .mr20 { margin-top: 20px; } .mb10 { margin-top: 10px; } .mb12 { margin-top: 12px; } .mb15 { margin-top: 15px; } .mb20 { margin-top: 20px; } .ml10 { margin-top: 10px; } .ml12 { margin-top: 12px; } .ml15 { margin-top: 15px; } .ml20 { margin-top: 20px; } :root { --paas-text: #333; //多用于主文字 --paas-text2: #666; //多用于 label --paas-text3: #79879c; //多用于次要文字，副标题 --paas-bg: #fff; //多用于背景 --paas-bg2: #f9fbfd; //多用于背景的内嵌 --paas-border: #d6d6d6; //多用于边框 --paas-btn-margin: 14px; //两个相邻 btn 的间距 --paas-page-padding: 12px; //页面的内 padding --paas-search-margin: 12px; //搜索与其他组件的间隙 &[data-wpg-theme="dark"] { --paas-text: #fff; --paas-text2: #adb5bd; --paas-text3: #adb5bd; --paas-bg: #1e2631; --paas-bg2: #181c24; --paas-border: #495057; } }