jooos-ui

安装

npm install jooos-ui -S

引入

// UI组件引入
import jooosUi from "jooos-ui"
Vue.use(jooosUi)
// 工具类引入（旧版）
for (let k in jooosUi.js) {
  Vue.prototype[`${k}`] = jooosUi.js[k]
}

工具类

说明

默认导出都加了下划线,避免与原生方法同名冲突

1、时间 _date

1.1、_date.dateObj()

// 获取当前时间时分秒
this.$_date.dateObj({date:"2021-05-02",isLunar:true})

1.2、_date.format()

// 获取当前格式化时间时分秒
this.$_date.format({date:"2021-05-02",format: "YYYY-MM-DD hh:mm:ss 第q季度 农历LYLMLD"})
// 2021-05-05 00:00:00 第2季度 农历辛丑(牛)年五月初五
// 接收参数 date,format

1.3、_date.formatStr()

// 获取时间 几分钟前 几小时前 几天前
this.$_date.formatStr({date:"2021-03-15"})
// 几天前 几天后

1.4、公共参数

参数名	默认值	值	描述
date	new Date()	时间	当前时间默认不传
isLunar	false	Bool	是否返回农历
format	YYYY-MM-DD hh:mm:ss	见format参数	按照格式返回时间

1.5、format参数

参数名	描述	值
YYYY	年	2021
MM	月	05
DD	日	05
hh	时	00
mm	分	00
ss	秒	00
q	季度	2
Q	季度(汉字)	二
LY	农历年	辛丑(牛)年
LM	农历月	五月
LD	农历日	初五

1、正则校验 _regExp

// this.$_regExp
// 正则校验
regMap  // 正则原文
isEmail("[e-mail]")   // 邮箱
isTel("027-888888")              // 座机
isPhoneRigorous("13554239409")   // 手机
isPhoneLoose("1355239409")       // 手机 - 严谨模式(工信部2019公布号段)
isPhone("1355239409")            // 手机 - 宽松模式(13,14,15,16,17,18,19开头)
isUrl("www.baidu.com")           // 网址 - 最宽松模式(1开头)
isIp("[e-mail]")      // IPV4
isIpV4("[e-mail]")    // IPV4
isIpV6("[e-mail]")    // IPV6
isNumber("1212")                 // 数字
isChina("[e-mail]")   // 中文
isDecimal("5.20")                // 浮点数
isUserName("username")           // 用户名
isPwd("[e-mail]")     // 密码 - 最少6位,包含1个大写字母/小写字母/数字/特殊字符(!@#$%^&*?.)

1、常用方法 _utils

// this.$_utils
delAfterPage（{params:{page:2,size:10,total:200},delNum=1}） // 删除后页码计算
cryptoMD5("加密的内容")                                      // md5加密

1、列表常用封装 _columnsLib

// this.$_columnsLib
columnsA(h, btnText, btnFun)                    // a链接
columnsAT(h, btnText, btnFun)                   // a链接 带提示
columnsB(h, btnText,type, btnFun)               // btn按钮 带提示 iview
columnsBT(h, btnText, btnFun)                   // btn按钮 带提示 iview
columnsConfirm(h, columnsAB, btnTitle, btnFun)    // 二次确认框 iview
columnsDropdownItem(h, btnText, btnFun)         // 下拉显示多个操作 iview

UI组件

说明

• JUI4组件基于iview4.0
• JUI3组件基于iview3.0
• 待完善

1、JUI4page 翻页组件

<JUI4page :current="current" :total="total" :page-size="size" :page-size-opts="pageSizeList" show-sizer show-total show-elevator @on-page="init"></JUI4page>
init(){}

参数名	默认值	值类型	描述
current	Int	1	当前页码
total	Int	0	总条数
page-size	Int	10	每页条数
page-size-opts	Arry	[10,20,50]	每页条数配置
show-sizer	Bool	false	显示分页，用来改变page-size
show-total	Bool	false	显示总条数
show-elevator	Bool	false	显示电梯，可以快速切换到某一页
@on-page	Fun	Fun({size,page})	回调钩子 翻页&每页条数变化触发

2、JUAceEditor 代码编辑组件

<JUAceEditor ref="jsEditor" :name="`jsEditor`" :editorData.sync="jsEditorData" :lang="`javascript`" :editorHead="jsEditorHead" @upEditorData="upEditorData">
 <template slot="rightSlot">
  <!-- <a href="javascript:;" class="qzy_plr5">语法说明</a> -->
  <Fullscreen v-model="isFullscreen" :id="`jsEditor`">全屏预览</Fullscreen>
 </template>
</JUAceEditor>
// 参数说明
editorHead: jsEditorHead,     // 代码编辑显示参数
lang: "javascript",           // 语言
@upEditorData: upEditorData,  // 更新编辑器内容

isFullscreen: true, // 全屏/退出全屏 此功能需要外部支持，此处只是示例

jsEditorHead: {
 title: "编辑脚本",
 desc: "请在下面的编辑器中编写代码或直接将代码复制到这里",
 rightDesc: "语法：JavaScript",
 isHead: true
},
upEditorData(name, editorData) {
 // 更新编辑器内容
 this[`${name}Data`] = editorData;
},

3、JUQrCode 二维码组件

<JUQrCode :text="text" :size="size" :margin="margin" :colorDark="colorDark" :colorLight="colorLight"></JUQrCode>

参数名	值类型	默认值	描述
text	Str	200	欲编码的内容
size	Int	10	尺寸, 长宽一致, 包含外边距
margin	Int	10	二维码图像的外边距, 默认 10px
colorDark	Str	#000	实点的颜色
colorLight	Str	#fff	空白区的颜色

版本记录

• 2023-03-13
  • 优化工具类导入方式,默认导入
• 2021-03-31
  • 增加工具类正则校验
• 2021-03-29
  • 增加工具类时间
• 2021-02-26
  • JUMAP增加高德地图组件
• 2020-10-26
  • JUQrCode 二维码
• 2020-04-28
  • JUAceEditor 代码编辑
  • JUI4page 翻页
• 2020-04-27
  • 测试调试发布npm包