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 |
车牌号 |
-- |