wip: 重构中
This commit is contained in:
@@ -1,51 +0,0 @@
|
||||
import { isServer } from '@/utils/is'
|
||||
let lastTime = 0
|
||||
const prefixes = 'webkit moz ms o'.split(' ')
|
||||
|
||||
let requestAnimationFrame: typeof window.requestAnimationFrame
|
||||
let cancelAnimationFrame: typeof window.cancelAnimationFrame
|
||||
(() => {
|
||||
const NO_LOOP: any = () => {}
|
||||
const getWindowFrame = (name: string) => {
|
||||
return name as any
|
||||
}
|
||||
if (isServer) {
|
||||
requestAnimationFrame = cancelAnimationFrame = NO_LOOP
|
||||
} else {
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
cancelAnimationFrame = window.cancelAnimationFrame
|
||||
let prefix
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
if (requestAnimationFrame && cancelAnimationFrame) {
|
||||
break
|
||||
}
|
||||
prefix = prefixes[i]
|
||||
requestAnimationFrame =
|
||||
requestAnimationFrame || window[getWindowFrame(prefix + 'RequestAnimationFrame')]
|
||||
cancelAnimationFrame =
|
||||
cancelAnimationFrame ||
|
||||
window[getWindowFrame(prefix + 'CancelAnimationFrame')] ||
|
||||
window[getWindowFrame(prefix + 'CancelRequestAnimationFrame')]
|
||||
}
|
||||
|
||||
// If the current browser does not support requestAnimationFrame and cancelAnimationFrame, it will fall back to setTimeout
|
||||
if (!requestAnimationFrame || !cancelAnimationFrame) {
|
||||
requestAnimationFrame = function(callback: Function) {
|
||||
const currTime = new Date().getTime()
|
||||
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
|
||||
const id = window.setTimeout(() => {
|
||||
/* eslint-disable-next-line */
|
||||
callback(currTime + timeToCall)
|
||||
}, timeToCall)
|
||||
lastTime = currTime + timeToCall
|
||||
return id
|
||||
}
|
||||
|
||||
cancelAnimationFrame = function(id: number) {
|
||||
window.clearTimeout(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
export { requestAnimationFrame, cancelAnimationFrame }
|
||||
@@ -1,277 +0,0 @@
|
||||
import { isServer } from './is'
|
||||
const ieVersion = isServer ? 0 : Number((document as any).documentMode)
|
||||
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g
|
||||
const MOZ_HACK_REGEXP = /^moz([A-Z])/
|
||||
|
||||
export interface ViewportOffsetResult {
|
||||
left: number
|
||||
top: number
|
||||
right: number
|
||||
bottom: number
|
||||
rightIncludeBody: number
|
||||
bottomIncludeBody: number
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
const trim = function(string: string) {
|
||||
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
const camelCase = function(name: string) {
|
||||
return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
|
||||
return offset ? letter.toUpperCase() : letter
|
||||
}).replace(MOZ_HACK_REGEXP, 'Moz$1')
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export function hasClass(el: Element, cls: string) {
|
||||
if (!el || !cls) return false
|
||||
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
|
||||
if (el.classList) {
|
||||
return el.classList.contains(cls)
|
||||
} else {
|
||||
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export function addClass(el: Element, cls: string) {
|
||||
if (!el) return
|
||||
let curClass = el.className
|
||||
const classes = (cls || '').split(' ')
|
||||
|
||||
for (let i = 0, j = classes.length; i < j; i++) {
|
||||
const clsName = classes[i]
|
||||
if (!clsName) continue
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.add(clsName)
|
||||
} else if (!hasClass(el, clsName)) {
|
||||
curClass += ' ' + clsName
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = curClass
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export function removeClass(el: Element, cls: string) {
|
||||
if (!el || !cls) return
|
||||
const classes = cls.split(' ')
|
||||
let curClass = ' ' + el.className + ' '
|
||||
|
||||
for (let i = 0, j = classes.length; i < j; i++) {
|
||||
const clsName = classes[i]
|
||||
if (!clsName) continue
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.remove(clsName)
|
||||
} else if (hasClass(el, clsName)) {
|
||||
curClass = curClass.replace(' ' + clsName + ' ', ' ')
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = trim(curClass)
|
||||
}
|
||||
}
|
||||
|
||||
export function getBoundingClientRect(element: Element): DOMRect | number {
|
||||
if (!element || !element.getBoundingClientRect) {
|
||||
return 0
|
||||
}
|
||||
return element.getBoundingClientRect()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前元素的left、top偏移
|
||||
* left:元素最左侧距离文档左侧的距离
|
||||
* top:元素最顶端距离文档顶端的距离
|
||||
* right:元素最右侧距离文档右侧的距离
|
||||
* bottom:元素最底端距离文档底端的距离
|
||||
* rightIncludeBody:元素最左侧距离文档右侧的距离
|
||||
* bottomIncludeBody:元素最底端距离文档最底部的距离
|
||||
*
|
||||
* @description:
|
||||
*/
|
||||
export function getViewportOffset(element: Element): ViewportOffsetResult {
|
||||
const doc = document.documentElement
|
||||
|
||||
const docScrollLeft = doc.scrollLeft
|
||||
const docScrollTop = doc.scrollTop
|
||||
const docClientLeft = doc.clientLeft
|
||||
const docClientTop = doc.clientTop
|
||||
|
||||
const pageXOffset = window.pageXOffset
|
||||
const pageYOffset = window.pageYOffset
|
||||
|
||||
const box = getBoundingClientRect(element)
|
||||
|
||||
const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect
|
||||
|
||||
const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0)
|
||||
const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0)
|
||||
const offsetLeft = retLeft + pageXOffset
|
||||
const offsetTop = rectTop + pageYOffset
|
||||
|
||||
const left = offsetLeft - scrollLeft
|
||||
const top = offsetTop - scrollTop
|
||||
|
||||
const clientWidth = window.document.documentElement.clientWidth
|
||||
const clientHeight = window.document.documentElement.clientHeight
|
||||
return {
|
||||
left: left,
|
||||
top: top,
|
||||
right: clientWidth - rectWidth - left,
|
||||
bottom: clientHeight - rectHeight - top,
|
||||
rightIncludeBody: clientWidth - left,
|
||||
bottomIncludeBody: clientHeight - top
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const on = function(
|
||||
element: HTMLElement | Document | Window,
|
||||
event: string,
|
||||
handler: EventListenerOrEventListenerObject
|
||||
): void {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, false)
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const off = function(
|
||||
element: HTMLElement | Document | Window,
|
||||
event: string,
|
||||
handler: any
|
||||
): void {
|
||||
if (element && event && handler) {
|
||||
element.removeEventListener(event, handler, false)
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const once = function(el: HTMLElement, event: string, fn: EventListener): void {
|
||||
const listener = function(this: any, ...args: unknown[]) {
|
||||
if (fn) {
|
||||
fn.apply(this, args)
|
||||
}
|
||||
off(el, event, listener)
|
||||
}
|
||||
on(el, event, listener)
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const getStyle = ieVersion < 9 ? function(element: Element | any, styleName: string) {
|
||||
if (isServer) return
|
||||
if (!element || !styleName) return null
|
||||
styleName = camelCase(styleName)
|
||||
if (styleName === 'float') {
|
||||
styleName = 'styleFloat'
|
||||
}
|
||||
try {
|
||||
switch (styleName) {
|
||||
case 'opacity':
|
||||
try {
|
||||
return element.filters.item('alpha').opacity / 100
|
||||
} catch (e) {
|
||||
return 1.0
|
||||
}
|
||||
default:
|
||||
return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null)
|
||||
}
|
||||
} catch (e) {
|
||||
return element.style[styleName]
|
||||
}
|
||||
} : function(element: Element | any, styleName: string) {
|
||||
if (isServer) return
|
||||
if (!element || !styleName) return null
|
||||
styleName = camelCase(styleName)
|
||||
if (styleName === 'float') {
|
||||
styleName = 'cssFloat'
|
||||
}
|
||||
try {
|
||||
const computed = (document as any).defaultView.getComputedStyle(element, '')
|
||||
return element.style[styleName] || computed ? computed[styleName] : null
|
||||
} catch (e) {
|
||||
return element.style[styleName]
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export function setStyle(element: Element | any, styleName: any, value: any) {
|
||||
if (!element || !styleName) return
|
||||
|
||||
if (typeof styleName === 'object') {
|
||||
for (const prop in styleName) {
|
||||
if (Object.prototype.hasOwnProperty.call(styleName, prop)) {
|
||||
setStyle(element, prop, styleName[prop])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
styleName = camelCase(styleName)
|
||||
if (styleName === 'opacity' && ieVersion < 9) {
|
||||
element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')'
|
||||
} else {
|
||||
element.style[styleName] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const isScroll = (el: Element, vertical: any) => {
|
||||
if (isServer) return
|
||||
|
||||
const determinedDirection = vertical !== null || vertical !== undefined
|
||||
const overflow = determinedDirection
|
||||
? vertical
|
||||
? getStyle(el, 'overflow-y')
|
||||
: getStyle(el, 'overflow-x')
|
||||
: getStyle(el, 'overflow')
|
||||
|
||||
return overflow.match(/(scroll|auto)/)
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const getScrollContainer = (el: Element, vertical?: any) => {
|
||||
if (isServer) return
|
||||
|
||||
let parent: any = el
|
||||
while (parent) {
|
||||
if ([window, document, document.documentElement].includes(parent)) {
|
||||
return window
|
||||
}
|
||||
if (isScroll(parent, vertical)) {
|
||||
return parent
|
||||
}
|
||||
parent = parent.parentNode
|
||||
}
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const isInContainer = (el: Element, container: any) => {
|
||||
if (isServer || !el || !container) return false
|
||||
|
||||
const elRect = el.getBoundingClientRect()
|
||||
let containerRect
|
||||
|
||||
if ([window, document, document.documentElement, null, undefined].includes(container)) {
|
||||
containerRect = {
|
||||
top: 0,
|
||||
right: window.innerWidth,
|
||||
bottom: window.innerHeight,
|
||||
left: 0
|
||||
}
|
||||
} else {
|
||||
containerRect = container.getBoundingClientRect()
|
||||
}
|
||||
|
||||
return elRect.top < containerRect.bottom &&
|
||||
elRect.bottom > containerRect.top &&
|
||||
elRect.right > containerRect.left &&
|
||||
elRect.left < containerRect.right
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
/**
|
||||
* 设置每个页面的title信息
|
||||
* @param {String} 单独页面的title
|
||||
* @param {String} 总页面的title
|
||||
*/
|
||||
export default function getPageTitle(pageTitle: string, allTitle?: string): string {
|
||||
if (pageTitle) {
|
||||
return `${allTitle} - ${pageTitle}`
|
||||
}
|
||||
return `${allTitle}`
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
/**
|
||||
* 对象数组深拷贝
|
||||
* @param {Array,Object} source 需要深拷贝的对象数组
|
||||
* @param {Array} noClone 不需要深拷贝的属性集合
|
||||
*/
|
||||
export function deepClone(source: any, noClone: string[] = []): any {
|
||||
if (!source && typeof source !== 'object') {
|
||||
throw new Error('error arguments deepClone')
|
||||
}
|
||||
const targetObj: any = source.constructor === Array ? [] : {}
|
||||
Object.keys(source).forEach((keys: string) => {
|
||||
if (source[keys] && typeof source[keys] === 'object' && noClone.indexOf(keys) === -1) {
|
||||
targetObj[keys] = deepClone(source[keys], noClone)
|
||||
} else {
|
||||
targetObj[keys] = source[keys]
|
||||
}
|
||||
})
|
||||
return targetObj
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找数组对象的某个下标
|
||||
* @param {Array} ary 查找的数组
|
||||
* @param {Functon} fn 判断的方法
|
||||
*/
|
||||
export function findIndex(ary: any, fn: Function): number {
|
||||
if (ary.findIndex) {
|
||||
return ary.findIndex(fn)
|
||||
}
|
||||
let index = -1
|
||||
ary.some((item: any, i: number, ary: any) => {
|
||||
const ret: any = fn(item, i, ary)
|
||||
if (ret) {
|
||||
index = i
|
||||
return ret
|
||||
}
|
||||
})
|
||||
return index
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String|Number} value 要验证的字符串或数值
|
||||
* @param {*} validList 用来验证的列表
|
||||
*/
|
||||
export function oneOf(value: string | number, validList: string[] | number[]): boolean {
|
||||
for (let i = 0; i < validList.length; i++) {
|
||||
if (value === validList[i]) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成随机字符串
|
||||
*/
|
||||
export function toAnyString() {
|
||||
const str: string = 'xxxxx-xxxxx-4xxxx-yxxxx-xxxxx'.replace(/[xy]/g, (c: string) => {
|
||||
const r: number = Math.random() * 16 | 0
|
||||
const v: number = c === 'x' ? r : (r & 0x3 | 0x8)
|
||||
return v.toString()
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
/**
|
||||
* 截取URL参数
|
||||
* @param {string} url
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function param2Obj(url: string) {
|
||||
const search: string = url.split('?')[1]
|
||||
if (!search) {
|
||||
return {}
|
||||
}
|
||||
return JSON.parse(
|
||||
'{"' +
|
||||
decodeURIComponent(search)
|
||||
.replace(/"/g, '\\"')
|
||||
.replace(/&/g, '","')
|
||||
.replace(/=/g, '":"')
|
||||
.replace(/\+/g, ' ') +
|
||||
'"}'
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {date} time 需要转换的时间
|
||||
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
|
||||
*/
|
||||
export function formatTime(time: any, fmt: string) {
|
||||
if (!time) return ''
|
||||
else {
|
||||
const date = new Date(time)
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1,
|
||||
'd+': date.getDate(),
|
||||
'H+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds(),
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3),
|
||||
'S': date.getMilliseconds()
|
||||
}
|
||||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
||||
for (const k in o) {
|
||||
if (new RegExp('(' + k + ')').test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((
|
||||
'00' + o[k]).substr(('' + o[k]).length)))
|
||||
}
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
export function is(val: unknown, type: string) {
|
||||
return toString.call(val) === `[object ${type}]`
|
||||
}
|
||||
|
||||
export const isWindow = (val: any): val is Window => {
|
||||
return typeof window !== 'undefined' && is(val, 'Window')
|
||||
}
|
||||
|
||||
export function isString(val: unknown): val is string {
|
||||
return is(val, 'String')
|
||||
}
|
||||
|
||||
export const isDef = <T = unknown>(val?: T): val is T => {
|
||||
return typeof val !== 'undefined'
|
||||
}
|
||||
|
||||
export const isUnDef = <T = unknown>(val?: T): val is T => {
|
||||
return !isDef(val)
|
||||
}
|
||||
|
||||
export const isFunction = (val: unknown): val is Function => typeof val === 'function'
|
||||
|
||||
export const isServer = typeof window === 'undefined'
|
||||
|
||||
export function isNumber(val: unknown): val is number {
|
||||
return is(val, 'Number')
|
||||
}
|
||||
|
||||
export const isFirefox = function() {
|
||||
return !!window.navigator.userAgent.match(/firefox/i)
|
||||
}
|
||||
|
||||
export const isClient = () => {
|
||||
return typeof window !== 'undefined'
|
||||
}
|
||||
|
||||
export const isObject = (val: any): val is Record<any, any> => {
|
||||
return val !== null && is(val, 'Object')
|
||||
}
|
||||
|
||||
export const isElement = (val: unknown): val is Element => {
|
||||
return isObject(val) && !!val.tagName
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// 验证网址
|
||||
export function isExternal(path: any): boolean {
|
||||
return /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/.test(path)
|
||||
}
|
||||
|
||||
// 验证邮箱
|
||||
export function isEmail(path: any): boolean {
|
||||
return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(path)
|
||||
}
|
||||
|
||||
// 验证手机
|
||||
export function isPhone(tel: any): boolean {
|
||||
return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(tel)
|
||||
}
|
||||
|
||||
// 验证身份证号
|
||||
export function isIdCard(id: any): boolean {
|
||||
return /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(id)
|
||||
}
|
||||
|
||||
// 验证固定电话
|
||||
export function isTel(tel: any): boolean {
|
||||
return /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/.test(tel)
|
||||
}
|
||||
|
||||
// 验证数字
|
||||
export function isNum(num: any): boolean {
|
||||
return /^[0-9]*$/.test(num)
|
||||
}
|
||||
Reference in New Issue
Block a user