jooos-ui

安装

npm install jooos-ui -S

引入

// UI组件引入
import jooosUi from 'jooos-ui'
Vue.use(jooosUi)
// 工具类引入
import commonJs from 'jooos-ui/common/index'
for (let k in commonJs) {
  Vue.prototype[`${k}`] = commonJs[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.isEmail('qzy404985074@qq.com')   // 邮箱
this.$_regExp.isTel('027-888888')              // 座机
this.$_regExp.isPhoneRigorous('13554239409')   // 手机
this.$_regExp.isPhoneLoose('1355239409')       // 手机 - 严谨模式(工信部2019公布号段)
this.$_regExp.isPhone('1355239409')            // 手机 - 宽松模式(13,14,15,16,17,18,19开头)
this.$_regExp.isUrl('www.baidu.com')           // 网址 - 最宽松模式(1开头)
this.$_regExp.isIp('qzy404985074@qq.com')      // IPV4
this.$_regExp.isIpV4('qzy404985074@qq.com')    // IPV4
this.$_regExp.isIpV6('qzy404985074@qq.com')    // IPV6
this.$_regExp.isNumber('1212')                 // 数字
this.$_regExp.isChina('qzy404985074@qq.com')   // 中文
this.$_regExp.isDecimal('5.20')                // 浮点数
this.$_regExp.isPwd('qzy404985074@qq.com')     // 密码 - 最少6位,包含1个大写字母/小写字母/数字/特殊字符(!@#$%^&*?.)

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	空白区的颜色

版本记录

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