rui-tool-kit v1.2.6

rui-ui-kit

一些我自己写的非常好用的组件和Util方法。

1. 更新日志

1.2.2

1. 增加 Number 工具方法
2. 修改工具方法模块名称为缩写，原有的长名称删除
3. 增加 Function 工具方法'
4. RuiDateTimePickerH5 组件更名为 RtkDateTimePickerH5
5. 重新组织工具包方法，将所有工具包方法整合到$Tool变量，具体用法请查看说明
6. 增加 Dom 工具方法包

1.2.1 2022-11-24

1. RuiDateTimePickerH5 组件增加 focus 和 blur 事件
2. 更正 RuiDateTimePickerH5 组件点击“清除”后输出字符串“Invalid date”的BUG
3. 增加 Array 工具方法
4. 曾加 Object 工具方法
5. 增加 String 工具方法

1.2.0 2022-11-18

1. 这是第一个版本，仅提供一个日期选择控件。

2. 辅助方法使用说明

暂无

3. 组件使用说明

全局引用：在main.js文件中如下配置

// 引入组件
import ruiToolKit from 'rui-tool-kit'
// 引入样式
import 'rui-tool-kit/theme/index.scss'
// 使用Vue.use注册组件
Vue.use(ruiToolKit)

局部引用：在你的页面或组件中如下配置

// 引入组件
import { 组件名称 } from 'rui-tool-kit'
// 在你的页面或组件中注册
components: { 组件名称 }

工具包支持全局单独安装

import { Tool } from 'rui-tool-kit'
Vue.use(Tool)

3.1. 日期选择组件（H5版本）

组件名称：RuiDateTimePickerH5

组件描述：一个对Html5原生input组件的二次封装，继承了原生组件的性能和操作，自动完成输入输出格式转换，重新定义了组件样式，缺点是样式可控的地方很少。

使用样例

<rui-date-time-picker-h5 v-model="yourVar" type="datetime-local">
</rui-date-time-picker-h5>

属性说明

事件说明

4. 工具方法说明

4.1 数组工具方法 Tool.Arr

全局引用时全部工具方法会自动注册到 Vue 的 \$Tool属性。使用 this.$Tool.Arr 可调用调用数组工具方法。

也可以如下局部引用:

import { Tool } from 'rui-tool-kit'
Tool.Arr // 通过 Tool.Arr 调用数组工具方法

4.1.1 isArray

方法定义：

isArray(arr)

说明：

判断传入的参数是否是数组对象

参数说明：

@param {Array} arr // 待判定对象
@returns 输入参数为数组类型返回true，反之返回false

调用示例：

const arr = [1,2,3,1]
const str = '123456'
const obj = { id: '1' }

Tool.Arr.isArray(arr) // 返回 true
Tool.Arr.isArray(str) // 返回 false
Tool.Arr.isArray(obj) // 返回 false

4.1.2 isEmptyArr

方法定义：

isEmptyArr(arr)

说明：

判断传入的参数是否是非空的数组对象

参数说明：

@param {Array} arr // 待判定对象
@returns 输入参数为数组类型且不为空返回true，反之返回false

调用示例：

const arr = [1,2,3,1]
const arr1 = []
const str = '123456'
const obj = { id: '1' }

Tool.Arr.isEmptyArr(arr) // 返回 false
Tool.Arr.isEmptyArr(arr1) // 返回 true
Tool.Arr.isEmptyArr(str) // 返回 false
Tool.Arr.isEmptyArr(obj) // 返回 false

4.1.3 toSeparated

方法定义：

toSeparated(arr, separator = ',')

说明：

将传入的数组转换为以指定分隔符分隔的字符串，
此方法仅支持字符串数组，非字符串数组可能无法得到你想要的结果

参数说明：

@param {Array} arr // 数组对象
@param {String} separator // 分隔符，默认逗号“，”分隔
@returns 以指定分隔符分隔的字符串

调用示例：

const arr = ['123','4','5','6']

Tool.Arr.toSparated(arr) // '123,4,5,6'
Tool.Arr.toSparated(arr, '@') // '123@4@5@6'

4.1.4 removeItem

方法定义：

removeItem(arr, index, len = 1)

说明：

删除数组对象的指定下标元素

参数说明：

@param {Array} arr // 数组对象
@param {Integer} index // 下标
@param {Integer} len // 删除个数,默认为1
@return 返回删除后的数组，会改变原数组

调用示例：

const arr = ['123','4','5','6']

Tool.Arr.removeItem(arr, 1) // ['123','5','6']

4.1.5 insertItem

方法定义：

insertItem(arr, index, item)

说明：

向数组的指定下标处插入元素

参数说明：

@param {Array} arr // 数组对象
@param {Integer} index //下标
@param {Any} item // 插入元素
@return 返回插入后的数组，会改变原数组

调用示例：

const arr = ['123','4','5','6']
const item = 'xxx'

Tool.Arr.insertItem(arr, 1, item) // ['123','xxx','4','5','6']

4.1.6 removeFirst

方法定义：

removeFirst(arr)

说明：

删除数组的第一个元素

参数说明：

@param {Array} arr 数组对象
@return 返回删除的项 会改变原数组

调用示例：

const arr = ['a', 'b', 'c']
Tool.Arr.removeFirst(arr) // ['b', 'c']

4.1.7 insertFirst

方法定义：

insertFirst(arr, item)

说明：

向数组的最前面添加元素

参数说明：

@param {Array} arr 数组对象
@param {Any} item 插入元素
@return 返回新的数组长度， 会改变原数组

调用示例：

const arr = ['a', 'b', 'c']
Tool.Arr.insertFirst(arr, 'x') // ['x', 'a', 'b', 'c']

4.1.8 removeLast

方法定义：

removeLast(arr)

说明：

移除数组的最后一项

参数说明：

@param {Array} arr 数组对象
@return 返回删除的项，会改变数组长度

调用示例：

const arr = ['a', 'b', 'c']
Tool.Arr.removeLast(arr) // ['a', 'b']

4.1.9 insertLast

方法定义：

insertLast(arr, item)

说明：

移除数组的最后一项

参数说明：

@param {Array} arr 数组对象
@param {Any} item 插入元素
@returns 返回添加后的数组长度， 会改变原来数组

调用示例：

const arr = ['a', 'b', 'c']
cosnt item = 'x'

Tool.Arr.insertLast = (arr, item) // ['a', 'b', 'c', 'x']

4.2 对象工具方法 Tool.Obj

全局引用时工具方法会自动注册到 Vue 的 \$Tool属性。使用 this.$Tool.Obj 可调用对象工具方法。

也可以如下局部引用:

import { Tool } from 'rui-tool-kit'
Tool.Obj // 通过 Tool.Obj 调用对象工具方法

4.2.1 hasOwnProp

方法定义：

hasOwnProp (obj, prop)

说明：

校验指定的对象obj中是否包含名称为b的属性

参数说明：

@param {Object} obj 对象实例
@param {String} prop 属性命名
@returns 参数对象包含指定属性返回true，反之返回false

调用示例：

const obj = { b: 'xx' }
const prop = 'b'
const prop1 = 'c'

Tool.Obj.hasOwnProp(a, prop) // true
Tool.Obj.hasOwnProp(a, prop1) // false

4.2.2 isUndefined

方法定义：

isUndefined (obj)

说明：

判断对象实例是否为 undefined

参数说明：

@param {Object} obj 对象实例
@returns 参数对象为undefined返回true，反之返回false

调用示例：

const objx = {}

Tool.Obj.isUndefined(obj) // true
Tool.Obj.isUndefined(objx) // false

4.2.3 isObject

方法定义：

isObject (obj)

说明：

判断对象实例是否为 undefined

参数说明：

@param {Any} obj 对象实例
@returns 参数对象为Object返回true，反之返回false

调用示例：

const objs = 'xxxx'
const obj = {}
const arr = []
const num = 123

Tool.Obj.isObject(objs) // false
Tool.Obj.isObject(obj) // true
Tool.Obj.isObject(arr) // false
Tool.Obj.isObject(num) // false

4.2.4 isEmptyObj

方法定义：

isEmptyObj (obj)

说明：

判断参数对象是否为空对象

参数说明：

@param {Object} obj 对象实例
@returns 参数对象为空Object返回true，反之返回false

调用示例：

const obj = {}
const obj1 = { a: 'x', b: 'y' }

Tool.Obj.isEmptyObj(obj) // true
Tool.Obj.isEmptyObj(obj1) // false

4.2.5 copy

方法定义：

copy (obj)

说明：

返回源对象的一个独立的全新的对象拷贝，拷贝后的对象修改不影响源对象。

参数说明：

@param {Object} obj 对象实例
@returns 返回源对象的一个独立的全新的对象拷贝

调用示例：

const obj = { a: '1', b: '2' }
const cobj = Tool.Obj.copy(obj)
console.log(obj) // { a: '1', b: '2' }
console.log(cobj) // { a: '1', b: '2' }
obj.a = '6'
cobj.a = '9'
console.log(obj) // { a: '6', b: '2' }
console.log(cobj) // { a: '9', b: '2' }

4.3 字符串工具方法 Tool.Str

全局引用时工具方法会自动注册到 Vue 的 \$Tool属性。使用 this.$Tool.Str 可调用字符串工具方法。

也可以如下局部引用:

import { Tool } from 'rui-tool-kit'
Tool.Str // 通过 Tool.Str 调用字符串工具方法

4.3.1 isString

方法定义：

isString (val)

说明：

判断输入参数是否为字符串

参数说明：

@param {Any} val 待判定对象
@returns 参数对象为String返回true，反之返回false

调用示例：

const num = 1
const str = 'aaa'
const obj = {}

Tool.Str.isString(num) // false
Tool.Str.isString(str) // true
Tool.Str.isString(obj) // false

4.3.2 isEmptyStr

方法定义：

isEmptyStr(val)

说明：

判断输入参数是否为空字符串

参数说明：

@param {String} val 待判定字符串
@returns 参数对象为空字符串返回true，反之返回false

调用示例：

const num = 1
const str = 'aaa'
const obj = {}
const nullStr = ''

Tool.Str.isEmptyStr(num) // false
Tool.Str.isEmptyStr(str) // false
Tool.Str.isEmptyStr(obj) // false
Tool.Str.isEmptyStr(nullStr) // ture

4.4 数值工具方法 Tool.Num

全局引用时工具方法会自动注册到 Vue 的 \$Tool属性。使用 this.$Tool.Num 可调用数值工具方法。

也可以如下局部引用:

import { Tool } from 'rui-tool-kit'
Tool.Num // 通过 Tool.Num 调用数值工具方法

4.4.1 isNumber

方法定义：

isNumber (val)

说明：

判断输入参数是否为数值，此方法不对输入参数进行类型转换。

参数说明：

@param {Any} val 输入参数，可为任意类型
@return 输入参数是数值时返回true，反之返回false。

调用示例：

cosnt str = '123'
const obj = {}
const arr = []
const f = 1.2
const int = 33
const nan = Number.NaN

Tool.Num.isNumber(str) // false
Tool.Num.isNumber(obj) // false
Tool.Num.isNumber(arr) // false
Tool.Num.isNumber(f) // true
Tool.Num.isNumber(int) // true
Tool.Num.isNumber(nan) // false

4.4.2 isInteger

方法定义：

isInteger (val)

说明：

判断输入参数是否为整数值，此方法不对输入参数进行类型转换。

参数说明：

@param {Any} val 输入参数，可为任意类型
@returns 输入参数是整数值时返回true，反之返回false。

调用示例：

cosnt str = '123'
const obj = {}
const arr = []
const f = 1.2
const int = 33
const nan = Number.NaN

Tool.Num.isInteger(str) // false
Tool.Num.isInteger(obj) // false
Tool.Num.isInteger(arr) // false
Tool.Num.isInteger(f) // false
Tool.Num.isInteger(int) // true
Tool.Num.isInteger(nan) // false

4.4.3 isFloat

方法定义：

isFloat (val)

说明：

判断输入参数是否为浮点数值，此方法不对输入参数进行类型转换。

参数说明：

@param {Any} val 输入参数，可为任意类型
@returns 输入参数是浮点数值时返回true，反之返回false。

调用示例：

cosnt str = '123'
const obj = {}
const arr = []
const f = 1.2
const int = 33
const nan = Number.NaN

Tool.Num.isFloat(str) // false
Tool.Num.isFloat(obj) // false
Tool.Num.isFloat(arr) // false
Tool.Num.isFloat(f) // true
Tool.Num.isFloat(int) // false
Tool.Num.isFloat(nan) // false

4.5 函数工具方法 Tool.Fun

全局引用时工具方法会自动注册到 Vue 的 \$Tool属性。使用 this.$Tool.Fun 可调用函数工具方法。

也可以如下局部引用:

import { Tool } from 'rui-tool-kit'
Tool.Fun // 通过 Tool.Fun 调用函数工具方法

4.5.1 isFunction

方法定义：

isFunction (val)

说明：

判断传入参数是否为Function类型

参数说明：

@param {Any} arg 传入参数
@returns 如传入参数为Function类型返回true，否则返回false

调用示例：

const fun = function() {}
const str = '21315'
const num = 123
const obj = {}

Tool.Fun.isFunction(fun) // true
Tool.Fun.isFunction(str) // false
Tool.Fun.isFunction(num) // false
Tool.Fun.isFunction(obj) // false

4.6 DOM工具方法 Tool.Dom

全局引用时工具方法会自动注册到 Vue 的 \$Tool属性。使用 this.$Tool.Dom 可调用DOM工具方法。

也可以如下局部引用:

import { Tool } from 'rui-tool-kit'
Tool.Dom // 通过 Tool.Dom 调用DOM工具方法

4.6.1 getBrowseInfo

方法定义：

getBrowseInfo ()

说明：

获取浏览器信息
包含：

  isNode, // 是否为Node运行环境
  isMobile, // 是否为移动端浏览器
  isEdge, // 是否为Edge浏览器
  isChrome, // 是否为Chrome浏览器
  isFirefox, // 是否为Firefox浏览器
  isMsie, // 是否为Ms IE浏览器
  isSafari // 是否为Safari浏览器

参数说明：

@Return 返回信息对象如下
  { isNode, isMobile, isEdge, isChrome, isFirefox, isMsie, isSafari }

调用示例：

Tool.Dom.getBrowseInfo() 
// 返回信息对象如下
// { isNode, isMobile, isEdge, isChrome, isFirefox, isMsie, isSafari }

4.6.2 getDomInfo

方法定义：

getDomInfo ()

说明：

获取DOM信息

包含：
  scrHeight,  // 屏幕高度
  scrWidth,   // 屏幕宽度
  avaiHeight, // 屏幕可视（不包含任务栏）高度
  avaiWidth,  // 屏幕可视（不包含任务栏）宽度
  docHeight,  // Document高度（整个页面的高度，包含显示区域以外的内容）
  docWidth,   // Document宽度（整个页面的高度，包含显示区域以外的内容）
  viewHeight, // 显示部分高度
  viewWidth,  // 显示部分宽度
  scrollTop,  // 垂直滚动条位置
  scrollLeft  // 水平滚动条位置

参数说明：

@Return 返回信息对象如下
  { scrHeight, scrWidth, avaiHeight, avaiWidth, docHeight, docWidth,
    viewHeight, viewWidth, scrollTop, scrollLeft }

调用示例：

Tool.Dom.getDomInfo() 
// 返回信息对象如下
// { scrHeight, scrWidth, avaiHeight, avaiWidth, docHeight, docWidth,
//   viewHeight, viewWidth, scrollTop, scrollLeft }

4.6.3 getElemInfos

方法定义：

getElemInfos (el)

说明：

获取传入元素的信息

包括：

  clientHeight, // 元素可视部分（width/height 和 padding 之和）高度
  clientWidth,  // 元素可视部分（width/height 和 padding 之和）款度
  offsetHeight, // 元素占据页面（包括 width/height、padding、border 以及滚动条的宽度）的高度
  offsetWidth,  // 元素占据页面（包括 width/height、padding、border 以及滚动条的宽度）的宽度
  scrollHeight, // 元素的总（包括隐藏的未显示的内容）高度
  scrollWidth,  // 元素的总（包括隐藏的未显示的内容）宽度
  scrollTop,    // 垂直滚动条的位置
  scrollLeft    // 水平滚动条的位置

参数说明：

@Param {Element} 页面元素对象
@Return 返回信息对象如下：
  { clientHeight, clientWidth, offsetHeight,offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft }

调用示例：

const el = document.getElementById('xx')
Tool.Dom.getElemInfos(el) 
// 返回信息对象如下
// { clientHeight, clientWidth, offsetHeight,offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft }

4.6.4 isBrowseType

方法定义：

isBrowseType (type)

说明：

校验浏览器是否为指定类型

参数说明：

@param {String} type 浏览器类型名称，可选值 'Edge'、 'Chrome'、 'Firefox'、 'msie'、 'Safari'
@returns 是指定类型浏览器时返回 true，否则返回 false

调用示例：

const el = document.isBrowseType('Edge')
// 如果当前运行的浏览器为 Edge 返回 true，否则返回 false。

4.6.4 isMobileBrowse

方法定义：

isMobileBrowse ()

说明：

校验浏览器是否为指定类型

参数说明：

@returns 运行在移动端浏览器时返回 true，否则返回 false

调用示例：

const el = document.isMobileBrowse()
// 运行在移动端浏览器时返回 true，否则返回 false