yl-view/libs/function/mixin.js

一个基于uniapp的ui框架

/**
 * 进行延时，以达到可以简写代码的目的，比如
 * await sleep(20)将会阻塞20ms
 */
function sleep(value = 30) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve()
        }, value)
    })
}
// 获取设备信息
function sys() {
    return uni.getSystemInfoSync()
}
// 防抖
function throttle(func, delay) {            
　　let prev = Date.now();            
　　return function() {                
　　　　let context = this;                
　　　　let args = arguments;                
　　　　let now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}

// 添加rpx单位
function addUnitRpx(value) {
	if(/\d$/.test(value)){
		return value + 'rpx'
	} else {
		return value
	}
}

// 以-连接的命名转为驼峰命名
function camelName(str){  
    var arr = str.split("-");//用split()函数来进行分割字符串arr里面包括【border，bottom，color】  
    for(var i=1;i<arr.length;i++){//从数组的第二项开始循环，charAt(0)找到第一个字母。substring(1)截掉第一个字母。  
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);//循环之后把得到的字符赋给arr。【border，Bottom， Color】
    }  
    return arr.join("");//用join方法来拼接，空拼接。就变成borderBottomColor  
}

// 查询节点信息
// 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug
// 解决办法为在组件根部再套一个没有任何作用的view元素
function ylGetRect(selector, _this ,all) {
	return new Promise((resolve) => {
		uni.createSelectorQuery()
			.in(_this)[all ? 'selectAll' : 'select'](selector)
			.boundingClientRect((rect) => {
				if (all && Array.isArray(rect) && rect.length) {
					resolve(rect)
				}
				if (!all && rect) {
					resolve(rect)
				}
			})
			.exec()
	})
}

// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
// 这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
// 值(默认为undefined)，就是查找最顶层的$parent
function $parent(name = undefined) {
    let parent = this.$parent
    // 通过while历遍，这里主要是为了H5需要多层解析的问题
    while (parent) {
        // 父组件
        if (parent.$options && parent.$options.name !== name) {
            // 如果组件的name不相等，继续上一级寻找
            parent = parent.$parent
        } else {
            return parent
        }
    }
    return false
}

function $children(name = undefined) {
    let childrens = this.$children
	let childs = []
	if(childrens.length){
		for (let i = 0; i < childrens.length; i++) {
			let children = childrens[i]
			if (children.$options && children.$options.name !== name) {
				// 如果组件的name不相等，继续上一级寻找
				childs = [...childs,...$children.call(children,name)]
			} else {
				childs = [...childs, children]
			}
		}
		return childs
	}
    return []
}
/**
 * @description error提示
 * @param {*} err 错误内容
 */
function error(err) {
	// 开发环境才提示，生产环境不会提示
	if (process.env.NODE_ENV === 'development') {
		console.error(`yl-view提示：${err}`)
	}
}
/**
 * @description error提示
 * @param {*} err 错误内容
 */
function log(err) {
	// 开发环境才提示，生产环境不会提示
	if (process.env.NODE_ENV === 'development') {
		console.log(`yl-view提示：${err}`)
	}
}

/**
 * 显示消息提示框
 * @param {String} title 提示的内容，长度与 icon 取值有关。
 * @param {Number} duration 提示的延迟时间，单位毫秒，默认：2000
 */
function toast(title, duration = 2000) {
	uni.showToast({
		title: String(title),
		icon: 'none',
		duration
	})
}
/**
 * 将sass导出的字体变量?%取消
 * @param {String} title 提示的内容，长度与 icon 取值有关。
 * @param {Number} duration 提示的延迟时间，单位毫秒，默认：2000
 */
function replace(value,suffix) {
	if(uni.$yl.test.string(value)){
		return value.replace(`/${prefix}/g`,suffix)
	}else{
		return value
	}
}
/**
 * 生成唯一标识
 */
function getUid(){
	return `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
}


export default {
	sys,
	sleep,
	ylGetRect,
	$parent,
	$children,
	throttle,
	addUnitRpx,
	camelName,
	error,
	log,
	toast,
	getUid
}