uview-pro 0.2.0 → 0.2.2

package/libs/function/colorGradient.ts

@@ -1,125 +1,125 @@
-/**
- * 求两个颜色之间的渐变值
- * @param startColor 开始的颜色
- * @param endColor 结束的颜色
- * @param step 颜色等分的份额
- * @returns 渐变色数组
- */
-function colorGradient(startColor: string = 'rgb(0, 0, 0)', endColor: string = 'rgb(255, 255, 255)', step: number = 10): string[] {
-    const startRGB = hexToRgb(startColor, false) as [number, number, number]; // 转换为rgb数组模式
-    const [startR, startG, startB] = startRGB;
-    const endRGB = hexToRgb(endColor, false) as [number, number, number];
-    const [endR, endG, endB] = endRGB;
-
-    const sR = (endR - startR) / step; // 总差值
-    const sG = (endG - startG) / step;
-    const sB = (endB - startB) / step;
-    const colorArr: string[] = [];
-    for (let i = 0; i < step; i++) {
-        // 计算每一步的hex值
-        const hex = rgbToHex(`rgb(${Math.round(sR * i + startR)},${Math.round(sG * i + startG)},${Math.round(sB * i + startB)})`);
-        colorArr.push(hex as string);
-    }
-    return colorArr;
-}
-
-/**
- * 将hex表示方式转换为rgb表示方式(返回rgb数组或字符串)
- * @param sColor hex或rgb字符串
- * @param str 是否返回字符串
- * @returns rgb数组或字符串
- */
-function hexToRgb(sColor: string, str: boolean = true): [number, number, number] | string {
-    const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-    sColor = sColor.toLowerCase();
-    if (sColor && reg.test(sColor)) {
-        if (sColor.length === 4) {
-            let sColorNew = '#';
-            for (let i = 1; i < 4; i += 1) {
-                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
-            }
-            sColor = sColorNew;
-        }
-        // 处理六位的颜色值
-        const sColorChange: [number, number, number] = [parseInt('0x' + sColor.slice(1, 3)), parseInt('0x' + sColor.slice(3, 5)), parseInt('0x' + sColor.slice(5, 7))];
-        if (!str) {
-            return sColorChange;
-        } else {
-            return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
-        }
-    } else if (/^(rgb|RGB)/.test(sColor)) {
-        const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',');
-        return arr.map(val => Number(val)) as [number, number, number];
-    } else {
-        return sColor;
-    }
-}
-
-/**
- * rgb转hex
- * @param rgb rgb字符串或hex字符串
- * @returns hex字符串
- */
-function rgbToHex(rgb: string): string | undefined {
-    const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-    if (/^(rgb|RGB)/.test(rgb)) {
-        const aColor = rgb.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',');
-        let strHex = '#';
-        for (let i = 0; i < aColor.length; i++) {
-            let hex = Number(aColor[i]).toString(16);
-            hex = hex.length == 1 ? '0' + hex : hex; // 保证每个rgb的值为2位
-            strHex += hex;
-        }
-        if (strHex.length !== 7) {
-            strHex = rgb;
-        }
-        return strHex;
-    } else if (reg.test(rgb)) {
-        const aNum = rgb.replace(/#/, '').split('');
-        if (aNum.length === 6) {
-            return rgb;
-        } else if (aNum.length === 3) {
-            let numHex = '#';
-            for (let i = 0; i < aNum.length; i += 1) {
-                numHex += aNum[i] + aNum[i];
-            }
-            return numHex;
-        }
-    } else {
-        return rgb;
-    }
-    // 默认返回原始值
-    return rgb;
-}
-
-/**
- * JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
- * @param color 十六进制色值或rgb字符串
- * @param alpha 透明度
- * @returns rgba字符串
- */
-function colorToRgba(color: string, alpha: number = 0.3): string {
-    color = rgbToHex(color) as string; // 确保是hex格式
-    const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-    let sColor = color.toLowerCase();
-    if (sColor && reg.test(sColor)) {
-        if (sColor.length === 4) {
-            let sColorNew = '#';
-            for (let i = 1; i < 4; i += 1) {
-                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
-            }
-            sColor = sColorNew;
-        }
-        const sColorChange: [number, number, number] = [parseInt('0x' + sColor.slice(1, 3)), parseInt('0x' + sColor.slice(3, 5)), parseInt('0x' + sColor.slice(5, 7))];
-        return `rgba(${sColorChange.join(',')},${alpha})`;
-    } else {
-        return sColor;
-    }
-}
-
-export default {
-    colorGradient,
-    hexToRgb,
-    rgbToHex,
-    colorToRgba
-};
+/**
+ * 求两个颜色之间的渐变值
+ * @param startColor 开始的颜色
+ * @param endColor 结束的颜色
+ * @param step 颜色等分的份额
+ * @returns 渐变色数组
+ */
+function colorGradient(startColor: string = 'rgb(0, 0, 0)', endColor: string = 'rgb(255, 255, 255)', step: number = 10): string[] {
+    const startRGB = hexToRgb(startColor, false) as [number, number, number]; // 转换为rgb数组模式
+    const [startR, startG, startB] = startRGB;
+    const endRGB = hexToRgb(endColor, false) as [number, number, number];
+    const [endR, endG, endB] = endRGB;
+
+    const sR = (endR - startR) / step; // 总差值
+    const sG = (endG - startG) / step;
+    const sB = (endB - startB) / step;
+    const colorArr: string[] = [];
+    for (let i = 0; i < step; i++) {
+        // 计算每一步的hex值
+        const hex = rgbToHex(`rgb(${Math.round(sR * i + startR)},${Math.round(sG * i + startG)},${Math.round(sB * i + startB)})`);
+        colorArr.push(hex as string);
+    }
+    return colorArr;
+}
+
+/**
+ * 将hex表示方式转换为rgb表示方式(返回rgb数组或字符串)
+ * @param sColor hex或rgb字符串
+ * @param str 是否返回字符串
+ * @returns rgb数组或字符串
+ */
+function hexToRgb(sColor: string, str: boolean = true): [number, number, number] | string {
+    const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+    sColor = sColor.toLowerCase();
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            let sColorNew = '#';
+            for (let i = 1; i < 4; i += 1) {
+                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+            }
+            sColor = sColorNew;
+        }
+        // 处理六位的颜色值
+        const sColorChange: [number, number, number] = [parseInt('0x' + sColor.slice(1, 3)), parseInt('0x' + sColor.slice(3, 5)), parseInt('0x' + sColor.slice(5, 7))];
+        if (!str) {
+            return sColorChange;
+        } else {
+            return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
+        }
+    } else if (/^(rgb|RGB)/.test(sColor)) {
+        const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',');
+        return arr.map(val => Number(val)) as [number, number, number];
+    } else {
+        return sColor;
+    }
+}
+
+/**
+ * rgb转hex
+ * @param rgb rgb字符串或hex字符串
+ * @returns hex字符串
+ */
+function rgbToHex(rgb: string): string | undefined {
+    const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+    if (/^(rgb|RGB)/.test(rgb)) {
+        const aColor = rgb.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',');
+        let strHex = '#';
+        for (let i = 0; i < aColor.length; i++) {
+            let hex = Number(aColor[i]).toString(16);
+            hex = hex.length == 1 ? '0' + hex : hex; // 保证每个rgb的值为2位
+            strHex += hex;
+        }
+        if (strHex.length !== 7) {
+            strHex = rgb;
+        }
+        return strHex;
+    } else if (reg.test(rgb)) {
+        const aNum = rgb.replace(/#/, '').split('');
+        if (aNum.length === 6) {
+            return rgb;
+        } else if (aNum.length === 3) {
+            let numHex = '#';
+            for (let i = 0; i < aNum.length; i += 1) {
+                numHex += aNum[i] + aNum[i];
+            }
+            return numHex;
+        }
+    } else {
+        return rgb;
+    }
+    // 默认返回原始值
+    return rgb;
+}
+
+/**
+ * JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
+ * @param color 十六进制色值或rgb字符串
+ * @param alpha 透明度
+ * @returns rgba字符串
+ */
+function colorToRgba(color: string, alpha: number = 0.3): string {
+    color = rgbToHex(color) as string; // 确保是hex格式
+    const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+    let sColor = color.toLowerCase();
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            let sColorNew = '#';
+            for (let i = 1; i < 4; i += 1) {
+                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+            }
+            sColor = sColorNew;
+        }
+        const sColorChange: [number, number, number] = [parseInt('0x' + sColor.slice(1, 3)), parseInt('0x' + sColor.slice(3, 5)), parseInt('0x' + sColor.slice(5, 7))];
+        return `rgba(${sColorChange.join(',')},${alpha})`;
+    } else {
+        return sColor;
+    }
+}
+
+export default {
+    colorGradient,
+    hexToRgb,
+    rgbToHex,
+    colorToRgba
+};

package/libs/function/debounce.ts

@@ -1,28 +1,28 @@
-let timeout: ReturnType<typeof setTimeout> | null = null;
-
-/**
- * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
- * @param func 要执行的回调函数
- * @param wait 延时的时间，单位ms，默认500
- * @param immediate 是否立即执行，默认false
- * @returns void
- */
-function debounce(func: () => void, wait: number = 500, immediate: boolean = false): void {
-    // 清除定时器
-    if (timeout !== null) clearTimeout(timeout);
-    // 立即执行，此类情况一般用不到
-    if (immediate) {
-        const callNow = !timeout;
-        timeout = setTimeout(() => {
-            timeout = null;
-        }, wait);
-        if (callNow) typeof func === 'function' && func();
-    } else {
-        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
-        timeout = setTimeout(() => {
-            typeof func === 'function' && func();
-        }, wait);
-    }
-}
-
-export default debounce;
+let timeout: ReturnType<typeof setTimeout> | null = null;
+
+/**
+ * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
+ * @param func 要执行的回调函数
+ * @param wait 延时的时间，单位ms，默认500
+ * @param immediate 是否立即执行，默认false
+ * @returns void
+ */
+function debounce(func: () => void, wait: number = 500, immediate: boolean = false): void {
+    // 清除定时器
+    if (timeout !== null) clearTimeout(timeout);
+    // 立即执行，此类情况一般用不到
+    if (immediate) {
+        const callNow = !timeout;
+        timeout = setTimeout(() => {
+            timeout = null;
+        }, wait);
+        if (callNow) typeof func === 'function' && func();
+    } else {
+        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
+        timeout = setTimeout(() => {
+            typeof func === 'function' && func();
+        }, wait);
+    }
+}
+
+export default debounce;

package/libs/function/deepClone.ts

@@ -1,39 +1,39 @@
-// 判断arr是否为一个数组，返回一个bool值
-function isArray(arr: any): arr is any[] {
-    return Object.prototype.toString.call(arr) === '[object Array]';
-}
-
-/**
- * 深度克隆
- * @param obj 需要克隆的对象
- * @param cache 用于处理循环引用的 WeakMap
- * @returns 克隆后的对象
- */
-function deepClone<T>(obj: T, cache: WeakMap<any, any> = new WeakMap()): T {
-    if (obj === null || typeof obj !== 'object') return obj;
-    if (cache.has(obj)) return cache.get(obj);
-    let clone: any;
-    if (obj instanceof Date) {
-        clone = new Date(obj.getTime());
-    } else if (obj instanceof RegExp) {
-        clone = new RegExp(obj);
-    } else if (obj instanceof Map) {
-        clone = new Map(Array.from(obj, ([key, value]) => [key, deepClone(value, cache)]));
-    } else if (obj instanceof Set) {
-        clone = new Set(Array.from(obj, value => deepClone(value, cache)));
-    } else if (Array.isArray(obj)) {
-        clone = obj.map(value => deepClone(value, cache));
-    } else if (Object.prototype.toString.call(obj) === '[object Object]') {
-        clone = Object.create(Object.getPrototypeOf(obj));
-        cache.set(obj, clone);
-        for (const [key, value] of Object.entries(obj)) {
-            clone[key] = deepClone(value, cache);
-        }
-    } else {
-        clone = Object.assign({}, obj);
-    }
-    cache.set(obj, clone);
-    return clone;
-}
-
-export default deepClone;
+// 判断arr是否为一个数组，返回一个bool值
+function isArray(arr: any): arr is any[] {
+    return Object.prototype.toString.call(arr) === '[object Array]';
+}
+
+/**
+ * 深度克隆
+ * @param obj 需要克隆的对象
+ * @param cache 用于处理循环引用的 WeakMap
+ * @returns 克隆后的对象
+ */
+function deepClone<T>(obj: T, cache: WeakMap<any, any> = new WeakMap()): T {
+    if (obj === null || typeof obj !== 'object') return obj;
+    if (cache.has(obj)) return cache.get(obj);
+    let clone: any;
+    if (obj instanceof Date) {
+        clone = new Date(obj.getTime());
+    } else if (obj instanceof RegExp) {
+        clone = new RegExp(obj);
+    } else if (obj instanceof Map) {
+        clone = new Map(Array.from(obj, ([key, value]) => [key, deepClone(value, cache)]));
+    } else if (obj instanceof Set) {
+        clone = new Set(Array.from(obj, value => deepClone(value, cache)));
+    } else if (Array.isArray(obj)) {
+        clone = obj.map(value => deepClone(value, cache));
+    } else if (Object.prototype.toString.call(obj) === '[object Object]') {
+        clone = Object.create(Object.getPrototypeOf(obj));
+        cache.set(obj, clone);
+        for (const [key, value] of Object.entries(obj)) {
+            clone[key] = deepClone(value, cache);
+        }
+    } else {
+        clone = Object.assign({}, obj);
+    }
+    cache.set(obj, clone);
+    return clone;
+}
+
+export default deepClone;

package/libs/function/deepMerge.ts

@@ -1,34 +1,34 @@
-import deepClone from './deepClone';
-
-/**
- * JS对象深度合并
- * @param target 目标对象
- * @param source 源对象
- * @returns 合并后的对象
- */
-function deepMerge<T extends object, S extends object>(target: T = {} as T, source: S = {} as S): T & S {
-    target = deepClone(target);
-    if (typeof target !== 'object' || target === null || typeof source !== 'object' || source === null) return target as T & S;
-    const merged: any = Array.isArray(target) ? target.slice() : Object.assign({}, target);
-    for (const prop in source) {
-        if (!Object.prototype.hasOwnProperty.call(source, prop)) continue;
-        const sourceValue = (source as any)[prop];
-        const targetValue = merged[prop];
-        if (sourceValue instanceof Date) {
-            merged[prop] = new Date(sourceValue);
-        } else if (sourceValue instanceof RegExp) {
-            merged[prop] = new RegExp(sourceValue);
-        } else if (sourceValue instanceof Map) {
-            merged[prop] = new Map(sourceValue);
-        } else if (sourceValue instanceof Set) {
-            merged[prop] = new Set(sourceValue);
-        } else if (typeof sourceValue === 'object' && sourceValue !== null) {
-            merged[prop] = deepMerge(targetValue, sourceValue);
-        } else {
-            merged[prop] = sourceValue;
-        }
-    }
-    return merged as T & S;
-}
-
-export default deepMerge;
+import deepClone from './deepClone';
+
+/**
+ * JS对象深度合并
+ * @param target 目标对象
+ * @param source 源对象
+ * @returns 合并后的对象
+ */
+function deepMerge<T extends object, S extends object>(target: T = {} as T, source: S = {} as S): T & S {
+    target = deepClone(target);
+    if (typeof target !== 'object' || target === null || typeof source !== 'object' || source === null) return target as T & S;
+    const merged: any = Array.isArray(target) ? target.slice() : Object.assign({}, target);
+    for (const prop in source) {
+        if (!Object.prototype.hasOwnProperty.call(source, prop)) continue;
+        const sourceValue = (source as any)[prop];
+        const targetValue = merged[prop];
+        if (sourceValue instanceof Date) {
+            merged[prop] = new Date(sourceValue);
+        } else if (sourceValue instanceof RegExp) {
+            merged[prop] = new RegExp(sourceValue);
+        } else if (sourceValue instanceof Map) {
+            merged[prop] = new Map(sourceValue);
+        } else if (sourceValue instanceof Set) {
+            merged[prop] = new Set(sourceValue);
+        } else if (typeof sourceValue === 'object' && sourceValue !== null) {
+            merged[prop] = deepMerge(targetValue, sourceValue);
+        } else {
+            merged[prop] = sourceValue;
+        }
+    }
+    return merged as T & S;
+}
+
+export default deepMerge;

package/libs/function/getParent.ts

@@ -1,59 +1,59 @@
-// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
-// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
-interface VueInstance {
-    $parent?: VueInstance;
-    $options?: { name?: string };
-    [key: string]: any;
-}
-
-/**
- * 获取父组件参数
- * @param this 当前组件实例
- * @param name 父组件name
- * @param keys 需要获取的参数名数组或对象
- * @returns 父组件参数对象
- */
-export default function getParent(this: VueInstance, name: string, keys: string[] | Record<string, any>): Record<string, any> {
-    let parent = this.$parent;
-    // 通过while历遍，这里主要是为了H5需要多层解析的问题
-    while (parent) {
-        // 父组件
-        if (parent.$options?.name !== name) {
-            // 如果组件的name不相等，继续上一级寻找
-            parent = parent.$parent;
-        } else {
-            const data: Record<string, any> = {};
-            // 判断keys是否数组，如果传过来的是一个数组，那么直接使用数组元素值当做键值去父组件寻找
-            if (Array.isArray(keys)) {
-                keys.forEach(val => {
-                    data[val] = parent?.[val] ? parent[val] : '';
-                });
-            } else {
-                // 历遍传过来的对象参数
-                for (const i in keys) {
-                    // 如果子组件有此值则用，无此值则用父组件的值
-                    // 判断是否空数组，如果是，则用父组件的值，否则用子组件的值
-                    if (Array.isArray(keys[i])) {
-                        if (keys[i].length) {
-                            data[i] = keys[i];
-                        } else {
-                            data[i] = parent[i];
-                        }
-                    } else if (keys[i] && keys[i].constructor === Object) {
-                        // 判断是否对象，如果是对象，且有属性，那么使用子组件的值，否则使用父组件的值
-                        if (Object.keys(keys[i]).length) {
-                            data[i] = keys[i];
-                        } else {
-                            data[i] = parent[i];
-                        }
-                    } else {
-                        // 只要子组件有传值，即使是false值，也是“传值”了，也需要覆盖父组件的同名参数
-                        data[i] = keys[i] || keys[i] === false ? keys[i] : parent[i];
-                    }
-                }
-            }
-            return data;
-        }
-    }
-    return {};
-}
+// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+interface VueInstance {
+    $parent?: VueInstance;
+    $options?: { name?: string };
+    [key: string]: any;
+}
+
+/**
+ * 获取父组件参数
+ * @param this 当前组件实例
+ * @param name 父组件name
+ * @param keys 需要获取的参数名数组或对象
+ * @returns 父组件参数对象
+ */
+export default function getParent(this: VueInstance, name: string, keys: string[] | Record<string, any>): Record<string, any> {
+    let parent = this.$parent;
+    // 通过while历遍，这里主要是为了H5需要多层解析的问题
+    while (parent) {
+        // 父组件
+        if (parent.$options?.name !== name) {
+            // 如果组件的name不相等，继续上一级寻找
+            parent = parent.$parent;
+        } else {
+            const data: Record<string, any> = {};
+            // 判断keys是否数组，如果传过来的是一个数组，那么直接使用数组元素值当做键值去父组件寻找
+            if (Array.isArray(keys)) {
+                keys.forEach(val => {
+                    data[val] = parent?.[val] ? parent[val] : '';
+                });
+            } else {
+                // 历遍传过来的对象参数
+                for (const i in keys) {
+                    // 如果子组件有此值则用，无此值则用父组件的值
+                    // 判断是否空数组，如果是，则用父组件的值，否则用子组件的值
+                    if (Array.isArray(keys[i])) {
+                        if (keys[i].length) {
+                            data[i] = keys[i];
+                        } else {
+                            data[i] = parent[i];
+                        }
+                    } else if (keys[i] && keys[i].constructor === Object) {
+                        // 判断是否对象，如果是对象，且有属性，那么使用子组件的值，否则使用父组件的值
+                        if (Object.keys(keys[i]).length) {
+                            data[i] = keys[i];
+                        } else {
+                            data[i] = parent[i];
+                        }
+                    } else {
+                        // 只要子组件有传值，即使是false值，也是“传值”了，也需要覆盖父组件的同名参数
+                        data[i] = keys[i] || keys[i] === false ? keys[i] : parent[i];
+                    }
+                }
+            }
+            return data;
+        }
+    }
+    return {};
+}

package/libs/function/getRect.ts

@@ -1,26 +1,26 @@
-/**
- * 获取元素的位置信息
- * @param {any} selector 选择器
- * @param {boolean} all 是否获取所有匹配元素
- * @returns {Promise<any>} 返回一个 Promise，解析为元素的位置信息
- */
-
-import { getCurrentInstance } from 'vue';
-
-export default function (selector: any, _instance: any = null, all: boolean = false): Promise<any> {
-    const instance = _instance || getCurrentInstance();
-    return new Promise(resolve => {
-        uni.createSelectorQuery()
-            .in(instance?.proxy)
-            [all ? 'selectAll' : 'select'](selector)
-            .boundingClientRect((rect: any) => {
-                if (all && Array.isArray(rect) && rect.length) {
-                    resolve(rect);
-                }
-                if (!all && rect) {
-                    resolve(rect);
-                }
-            })
-            .exec();
-    });
-}
+/**
+ * 获取元素的位置信息
+ * @param {any} selector 选择器
+ * @param {boolean} all 是否获取所有匹配元素
+ * @returns {Promise<any>} 返回一个 Promise，解析为元素的位置信息
+ */
+
+import { getCurrentInstance } from 'vue';
+
+export default function (selector: any, _instance: any = null, all: boolean = false): Promise<any> {
+    const instance = _instance || getCurrentInstance();
+    return new Promise(resolve => {
+        uni.createSelectorQuery()
+            .in(instance?.proxy)
+            [all ? 'selectAll' : 'select'](selector)
+            .boundingClientRect((rect: any) => {
+                if (all && Array.isArray(rect) && rect.length) {
+                    resolve(rect);
+                }
+                if (!all && rect) {
+                    resolve(rect);
+                }
+            })
+            .exec();
+    });
+}