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("[email protected]")   // 邮箱
isTel("027-888888")              // 座机
isPhoneRigorous("13554239409")   // 手机
isPhoneLoose("1355239409")       // 手机 - 严谨模式(工信部2019公布号段)
isPhone("1355239409")            // 手机 - 宽松模式(13,14,15,16,17,18,19开头)
isUrl("www.baidu.com")           // 网址 - 最宽松模式(1开头)
isIp("[email protected]")      // IPV4
isIpV4("[email protected]")    // IPV4
isIpV6("[email protected]")    // IPV6
isNumber("1212")                 // 数字
isChina("[email protected]")   // 中文
isDecimal("5.20")                // 浮点数
isUserName("username")           // 用户名
isPwd("[email protected]")     // 密码 - 最少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包