如何使用

前言：emnj-uilib 是对element plus部分组件的二次封装，以及部分自定义组件。使用的项目需要自行安装element plus

使用包管理器

建议使用如下的包管理进行安装emnj3-uilib

# NPM
$ npm install emnj3-uilib --save

# Yarn
$ yarn add emnj3-uilib

# pnpm
$ pnpm install emnj3-uilib

快速开始

样式引用

// main.ts
import 'emnj3-uilib/dist/emnj3-uilib.umd.css'

完整引入

// main.ts
import { createApp } from 'vue'
import Emnj3UiLib from 'emnj3-uilib'
import 'emnj3-uilib/dist/emnj3-uilib.umd.css'
import App from './App.vue'

const app = createApp(App)

app.use(Emnj3UiLib)
app.mount('#app')

按需引入

1. 在入口文件（如 main.ts）中引用特定的组件

// main.ts
import { createApp } from 'vue'
import { EmTable, EmColumnsFilter } from 'emnj3-uilib'
import 'emnj3-uilib/dist/emnj3-uilib.umd.css'
import App from './App.vue'

const app = createApp(App)

app.use(EmTable)
app.use(EmColumnsFilter)
app.mount('#app')

EmTable

EmTable是对el-table的二次封装，它可以接受所有的el-table的属性和方法，并拓展了其他功能，如下

1. 动态计算表格视图窗口中应该展示的高度
2. 内置了组合了分页组件以及功能
3. 支持表格列的筛选能力

EmTable Attributes

支持el-table所有的属性和方法，并扩展了下列属性。且默认设置table启动border模式。

| 属性名 | 说明 | 类型 | 默认值 | | ----------------- | ------------------------ | ------------------------------------- | --------------------- | | total | 分页时候使用，表格总条数 | number | 0 | | current | 当前分页页码 | number | 1 | | pageSize | 分页的大小 | number | 20 | | showPage | 是否展示分页 | boolean | true | | columnsFilterSize | 列选择器大小 | "" | "small" | "default" | "large" | "" | | showColumnsFilter | 是否展示列选择器 | boolean | true | | pageSizes | 分页数的枚举 | boolean | [10, 20, 30, 50, 100] | | footerHeight | 控制表格底部区域的高度，如果不设置，这根据showPage是否为真判断 | number | null |

EmTable 事件

| 名称 | 说明 | 类型 | | --------------- | ---------------------- | ---------------------------------------- | | page-change | 分页 page 改变时候触发 | (pageSize: number, page: number) => void | | update:pageSize | 分页的分页条数变化触发 | (pageSize: number) => void | | update:current | 分页的当前页变化触发 | (pageNo: number) => void |

EmTable 插槽

| 名称 | 说明 | 子标签 | | ------------ | ---------------------------------------------------------------- | ------------ | | default | 默认会传给el-table，应该传el-table-column的列表 | Table-column | | toolbarLeft | 插入展示到表格顶部左侧，作为表格的左侧工具栏 | - | | toolbarRight | 插入展示到表格顶部右侧，并在列选择器的左侧，作为表格的右侧工具栏 | - |

EmTable 方法

| 方法 | 说明 | 参数 | | ---------------- | ----------------------- | ---- | | getTableInstance | 获取 ElTable 的实例对象 | |

Table-column 属性说明

默认情况下列选择器会展示所有的列，但是如果希望默认情况下不展示所有的列，只需要给el-table-column添加一个show属性，并设置为false即可。

示例

<template>
  <em-table :data="tableData" border stripe>
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <-- 默认不展示这一列 -->
    <el-table-column prop="address" label="Address" :show="false" />
  </em-table>
</template>
<script>
  import { ref } from 'vue'
  import { EmTable } from 'emnj3-uilib'
  export default {
    components: { EmTable },
    setup() {
      const tableData = ref([
        {
          date: '2016-05-02',
          name: '王小虎',
          age: 22,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-04-04',
          name: '王小虎',
          age: 12,
          address: '上海市普陀区金沙江路 1517 弄',
        },
      ])
      return {
        tableData,
      }
    },
  }
</script>

工具库函数部分

日常项目中经常需要对后端的一些数据进行特定的格式话，而在每个项目都需要重复这样的工作，现收集部分最常见的工具函数加入其中

如何引入

所有的工具库放在 plugin 文件夹中引入

// 使用示例
import { toLocaleString, toFormatBytes } from 'emnj3-uilib/plugin/unit'

工具函数定义

/**
 * 将数字，字符串数字转千分位方法，并对其他异常情况进行处理，返回'-'
 * @param value
 * @returns
 */
export declare const toLocaleString: (value: number | string) => string | 0

/**
 * 格式化字节大小，以人易读的格式
 * 返回单位：['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
 * @param a 字节大小单位Bit
 * @param b 二进制
 * @returns string
 */
export declare const toFormatBytes: (a: number, b?: number) => string

/**
 * 将时间戳转换为人易读的格式
 * 比如，100000毫秒
 * @param value 时间戳
 * @param unit 原始单位 ms：毫秒 s：秒，不传默认使用毫秒进行转换
 * @returns
 */
export declare const toFormatTime: (
  value: number | string,
  unit?: 'ms' | 's'
) => string

/**
 * 构建uuid
 * @returns
 */
export declare function buildUUID(): string
/**
 * 构建短uuid
 * @param prefix
 * @returns
 */
export declare function buildShortUUID(prefix?: string): string