zb-comp v0.6.1

指标网组件库

基于ElementUI进行的二次封装组件库

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run lib

安装

使用npm安装插件

npm i zb-comp

在入口文件导入zb-comp

import ZbComp from 'zb-comp';
import 'zb-comp/lib/index/index.css';
Vue.use(ZbComp);

按需加载

增加bable-plugin-import插件

npm i babel-plugin-import -D

修改babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'zb-comp',
        style: name => `${name}/index.css`,
        camel2DashComponentName: false,
        camel2UnderlineComponentName: false,
      },
    ],
  ],
};

修改导入方式

import { Dialog,Space,NoData } from 'zb-comp';

Vue.use(Dialog);
Vue.use(Space);
Vue.use(NoData);

组件

Space

避免组件紧贴在一起，拉开统一的空间。

<zb-space>
  <div>Div1</div>
  <div>Div2</div>
</zb-space>

ColumnFilter

表格列设置，可以选择需要展示的列和不需展示的列 1. 设置表头最后一列的render方式

<el-table-column prop="action" label="操作" align="left" :render-header="renderOperationHeader">

2. 在render函数中加入zb-column-filter

renderOperationHeader(h: any, { column }: any) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <span>{column.label}</span>
      <zb-column-filter columns={indexTableColumn} onChange={this.columnChange} />
    </div>
  );
}

column

Dialog

基于ElementUI的Dialog，可接受ElementUI的参数

<zb-dialog></zb-dialog>

插槽

函数式调用Dialog

导入插件后，可直接用下面的命令弹出Dialog

this.$dialog.alert({
  type: 'danger',
  message: '弹出框',
  confirm: () => {
    console.log('点击确定回调')
  },
  close: () => {
    console.log('点击取消回调')
  }
})

总共有this.$dialog.alert和this.$dialog.confirm两种调用方式，效果同window.alert和window.confirm

注意

1. 函数式调用，适用于只需要给用户进行一句话提示时使用，复杂场景请使用组件式调用
2. 组件式调用，请不要同时传入confirm事件和confirm属性，否则点击确定会触发两次
3. 组件式调用，请不要同时传入close事件和close属性，否则点击确定会触发两次

NoData

无数据时的展示

<zb-nodata />

TableSearch

表格条件筛选组件，基于ElementUI的Form、FormItem、Input、Select、Cascader、DatePicker、Button等组件封装

<zb-table-search />

参数

conf 参数配置举例

get searchConf(): Record<string, any>[] {
  return [
    {
      type: 'input',
      id: 'queryName',
      name: '名称',
      placeholder: '请输入清单名称',
      length: 30,
    },
    {
      type: 'select',
      id: 'reviewStatus',
      name: '审核状态',
      placeholder: '请选择审核状态',
      options: this.reviewStatusList.map((_item: { status: string; name: string }) => ({
        value: _item.status,
        name: _item.name,
      })),
    },
    {
      type: 'date-range',
      id: 'dateRange',
      name: '审核时间',
      dbWidth: true,
      'picker-options': {
        disabledDate(time: any): boolean {
          const endTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60* 1000 - 1;
          return time.getTime() > endTime;
        },
      },
    },
    {
      type: 'select',
      id: 'rational',
      name: '是否合理',
      placeholder: '请选择审核人',
      options: [
        {
          name: '是',
          value: true,
        },
        {
          name: '否',
          value: false,
        },
      ],
    },
    {
      type: 'select',
      id: 'areaId',
      name: '地区',
      placeholder: '请选择地区',
      event: {
        change: (value: string) => this.getBqItem(value),
      },
      options: this.areaList.map((_item: { areaId: string; name: string }) => ({
        value: _item.areaId,
        name: _item.name,
      })),
    },
    {
      type: 'select',
      id: 'tradeTemplateId',
      name: '清单',
      placeholder: '请选择清单',
      event: {
        change: (value: string) => this.getBqItemTrade(value),
      },
      hidden: !this.selectedAreaId,
      options: this.tradeTemplateList.map((_item: { id: string; description: string }) => ({
        value: _item.id,
        name: _item.description,
      })),
    }
  ]

事件

插槽

QuarterPicker

季度选择器，基于ElementUI的DatePicker, Card等组件封装，实现季度选择

<zb-quarter-picker />

参数

事件

QuarterRangePicker

季度范围选择器，基于ElementUI的DatePicker, Card等组件封装，实现季度范围选择

<zb-quarter-range-picker />

参数

事件

Table

表格组件，基于ElementUI的Table, TableColumn, Pagination等组件和TableSearch组件实现的包含顶部条件筛选，表格及分页功能的 列表组件。

<zb-table />

参数

注意

1. 除上表中参数外，还支持el-table组件支持的所有参数

事件

注意

1. 除上表中事件外，还支持el-table组件支持的所有事件

插槽

Excel

基于 luckysheet 和 luckyexcel 的 Excel文件预览组件。

<zb-excel />

参数

注意

1. 目前只支持.xlsx格式的Excel文件预览；
2. config如果使用默认配置参数，该组件只支持预览，如果需要其他功能，可通过config进行配置，具体可参考luckysheet官方文档： https://mengshukeji.gitee.io/LuckysheetDocs/zh/；
3. 使用该组件需在项目public下的index.html文件中引入如下文件：

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

Docx

基于 docx-preview 封装的 Word 文档预览组件

<zb-docx />

参数

注意

1. 目前只支持.docx格式的Word文档预览；