1.1.14 • Published 7 months ago
emnj3-uilib v1.1.14
如何使用
前言: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')
按需引入
- 在入口文件(如
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
的属性和方法,并拓展了其他功能,如下
- 动态计算表格视图窗口中应该展示的高度
- 内置了组合了分页组件以及功能
- 支持表格列的筛选能力
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 |
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
1.1.14
7 months ago
1.1.9
7 months ago
1.1.12
7 months ago
1.1.11
7 months ago
1.1.10
7 months ago
1.1.13
7 months ago
1.1.8
9 months ago
1.1.7
9 months ago
1.1.6
9 months ago
1.1.5
9 months ago
1.1.4
9 months ago
1.1.3
9 months ago
1.1.2
9 months ago
1.1.1
10 months ago
1.1.0
10 months ago
1.0.16
10 months ago
1.0.15
10 months ago
1.0.14
10 months ago
1.0.12
10 months ago
1.0.11
10 months ago
1.0.10
10 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.4
11 months ago
1.0.3
11 months ago
1.0.2
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago