Wigem_ui NPM | npm.io

wigemUi

wigem 组件库

一款基于 ElementPlus 进行开发的组件库

使用前需下载 ElementPlus 组件库,echart 插件,如需使用 pdf 在线预览组件，需下载 pdfjs-dist 插件

下载方式

npm install wigem_ui 或者 yarn add wigem_ui

从项目中引用

在 main.ts 中引用

import wigem from 'wigem_ui'
import 'wigem_ui/dist/style.css'
app.use(wigem)

组件

wgPicker 日期选择器

<Picker></Picker>

属性

属性名	说明	类型	可选值	默认值
data	需要传递数据	Object	--	{}
model-value/v-model	绑定值	string	--	--
showValue	返回转换日期值	string	--	--
disabled	是否禁用状态	boolean	true/false	false

方法

方法名	说明	参数
handelClick	获取转换日期格式	--
monthStr	获取月份	--
yearStr	获取年份	--
initDataTime	获取当前日期	--

Table 表格组件

<Table></Table>

属性

属性名	说明	类型	可选值	默认值
data	数据	Array	--	--
headerTitle	表格标题	string	--	--
columns	需要展示的列，prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽	Array	--	--
where	排序条件	Object	--	--
isPage	是否分页	boolean	true/false	true
param	分页参数{pageNo: 1, pageSize: 20, count: 0,}	Object	--	{pageNo: 1, pageSize: 20, count: 0,}
isTableTitle	是否展示标题	boolean	true/false	false
timeOut	延时加载	Number	--	100
isShowSummary	是否在表尾显示合计行	boolean	true/false	false
border	是否带边框	boolean	true/false	true
selection	是否开启多选	boolean	true/false	false
type	选择方式（仅用于多选时）	string	select(多选)/radio(单选)	select
tableHeight	表格高度	Number	--	330
dataTime	时间	string	--	--
highlight	是否高亮	boolean	true/false	false

方法

方法名	说明	参数
_tableInit	加载默认表格配置信息	--
load	重新加载	--

插槽

名称	说明
--	自定义列的内容作用域参数为 { row, column, $index }

wg-price 数字转换组件

<wg-price></wg-price>

属性

属性名	说明	类型	可选值	默认值
model-value/v-model	绑定值	Number	--	--
suffix	单位	string	%	--
decimalDigits	保留小位数	Number	---	2
position	位置	string	--	left

wg-card 卡片组件

<wg-card></wg-card>

属性

属性名	说明	类型	可选值	默认值
title	卡片 title	string	--	--
height	卡片高度	string	--	--
padding	卡片边距	string	---	'10px'
unit	卡片右侧显示内容，默认不显示	string	--	--
img	卡片 title 图片	string	--	--

Dictionary 下拉框字典组件

<Dictionary></Dictionary>

属性

属性名	说明	类型	可选值	默认值
modelValue	绑定值	string	--	--
data	字典数据	object	{text:'显示文字',value:'值' }	--
code	字典键值	string	--	--
placeholder	输入框占位文本	string	--	'请选择'
multiple	是否开启多选	boolean	true/false	false
multipleLimit	最大选择数量	Number	--	--
collapseTags	多选时是否将选中值按文字的形式展示	boolean	true/false	false
disabled	是否禁用	boolean	true/false	false
filterable	是否可搜索	boolean	true/false	false

方法

方法名	说明	参数
initDictionaryData	加载数据	--

wg-threshold-value 数据上下箭头判断组件

注意：使用前需要下载字体文件，执行 npm install font-awesome ，并且在 main.ts 文件中引用 import 'font-awesome/css/font-awesome.min.css';

<wg-threshold-value></wg-threshold-value>

属性

属性名	说明	类型	可选值	默认值
modelValue	绑定值	string	--	--
suffix	单位	string	--	--

wg-threshold-plus 基于数据上下箭头判断组件升级版

<wg-threshold-plus></wg-threshold-plus>

属性

属性名	说明	类型	可选值	默认值
modelValue	绑定值	string	--	--
suffix	单位	string	--	--

Pdf 在线预览组件

需下载 pdfjs-dist 插件

<wg-pdf></wg-pdf>

属性

属性名	说明	类型	可选值	默认值
pdfPath	pdf 文件路径，如果是在线文件需要传递文件流	string	--	--
height	pdf 相对于页面高度，单位 vh	number	--	77

Tag 标签组件

<wg-tag></wg-tag>

属性

属性名	说明	类型	可选值	默认值
labelName	展示的标签内容，需要用,分割，例如"标签 1,标签 2"	string	--	--

使用 echart 组件

需要下载 deepmerge 插件

bar echart 图 bar 柱状图组件

<bar></bar>

属性

属性名	说明	类型	可选值	默认值
option	柱状图配置文件	object	--	--

方法

方法名	说明	参数
initBar	重新加载	--

line echart 图 line 折线图组件

<line></line>

属性

属性名	说明	类型	可选值	默认值
option	折线图配置文件	object	--	--

方法

方法名	说明	参数
initLine	重新加载	--

pie echart 图 pie 饼图组件

<pie></pie>

属性

属性名	说明	类型	可选值	默认值
option	饼图配置文件	object	--	--

方法

方法名	说明	参数
initPie	重新加载	--

验证规则

在 main.ts 中全局引用,或者局部引用

// 全局引用
import wigem from 'wigem_ui'
app.config.globalProperties.$wigem = wigem.common
// 使用方式
proxy.$wigem.方法名称(参数)

// 局部引用
import wigem from 'wigem_ui'
const $wigem = wigem.common
// 使用方法
$wigem.方法名称(参数)

方法

方法名	说明	参数
isEmpty	验证是否为空	--
ifEmpty	如果为空反回指定内容(参数,返回值)	--
verifyNumberPercentage	验证百分比（不可以小数）	--
verifyNumberPercentageFloat	验证百分比（可以小数）	--
verifyNumberIntegerAndFloat	小数或整数(不可以负数)	--
verifiyNumberInteger	正整数验证	--
verifyCnAndSpace	去掉中文及空格	--
verifyEnAndSpace	去掉英文及空格	--
verifyAndSpace	禁止输入空格	--
verifyNumberComma	金额用 `,` 区分开	--
verifyTextColor	匹配文字变色（搜索时）	--
verifyNumberCnUppercase	数字转中文大写	--
verifyPhone	手机号码	--
verifyTelPhone	国内电话号码	--
verifyAccount	登录账号 (字母开头，允许 5-16 字节，允许字母数字下划线)	--
verifyPassword	密码 (以字母开头，长度在 6~16 之间，只能包含字母、数字和下划线)	--
verifyPasswordPowerful	强密码 (字母+数字+特殊字符，长度在 6-16 之间)	--
verifyPasswordStrength	密码强度	--
verifyIPAddress	IP 地址	--
verifyEmail	邮箱	--
verifyIdCard	身份证	--
verifyFullName	姓名	--
verifyPostalCode	邮政编码	--
verifyUrl	url 处理	--
verifyCarNum	车牌号	--