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() {
	// #ifdef MP-WEIXIN
	return {
		...uni.getSystemSetting(),
		...uni.getAppAuthorizeSetting(),
		...uni.getDeviceInfo(),
		...uni.getWindowInfo(),
		...uni.getAppBaseInfo()
	}
	// #endif
	// #ifndef MP-WEIXIN
	return uni.getSystemInfoSync()
	// #endif
}
// 防抖
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) {
	let query = null
	// #ifdef MP-ALIPAY
	query = uni.createSelectorQuery()
	// #endif
	// #ifndef MP-ALIPAY
	query = uni.createSelectorQuery().in(_this)
	// #endif
	return new Promise((resolve) => {
		query[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
}