rui-tool-kit

v1.2.6

Published

2 years ago

A Component Library for Vue.js

Downloads

0High
0Medium
0Low

wangyq2022

rui-ui-kit

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

1. 更新日志

1.2.2

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

1.2.1 2022-11-24

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

1.2.0 2022-11-18

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

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>

属性说明

属性|说明|类型|可选值|默认值 -|-|-|-|- v-mode|绑定值|String|-|- readonly|只读|Boolean|-|fasle disabled|禁用|Boolean|-|false type|组件类型|String|date/datetile-local/time/month/week|- name|原生属性|String|-|- width|组件宽度|String/Number|-|100% min|最小值|String|type=date/datetime-local时生效，格式为YYYY-MM-DD|- max|最大值|String|type=date/datetime-local时生效，格式为YYYY-MM-DD|9999-12-31 customClass|自定义样式|String|-|-

事件说明

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

rui-ui-kit

1. 更新日志

1.2.2

1.2.1 2022-11-24

1.2.0 2022-11-18

2. 辅助方法使用说明

3. 组件使用说明

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

使用样例

属性说明

事件说明

4. 工具方法说明

4.1 数组工具方法 Tool.Arr

4.1.1 isArray

4.1.2 isEmptyArr

4.1.3 toSeparated

4.1.4 removeItem

4.1.5 insertItem

4.1.6 removeFirst

4.1.7 insertFirst

4.1.8 removeLast

4.1.9 insertLast

4.2 对象工具方法 Tool.Obj

4.2.1 hasOwnProp

4.2.2 isUndefined

4.2.3 isObject

4.2.4 isEmptyObj

4.2.5 copy

4.3 字符串工具方法 Tool.Str

4.3.1 isString

4.3.2 isEmptyStr

4.4 数值工具方法 Tool.Num

4.4.1 isNumber

4.4.2 isInteger

4.4.3 isFloat

4.5 函数工具方法 Tool.Fun

4.5.1 isFunction

4.6 DOM工具方法 Tool.Dom

4.6.1 getBrowseInfo

4.6.2 getDomInfo

4.6.3 getElemInfos

4.6.4 isBrowseType

4.6.4 isMobileBrowse