uview-pro 0.0.1

package/libs/css/style.vue.scss

@@ -0,0 +1,175 @@
+page {
+	color: $u-main-color;
+	font-size: 28rpx;
+}
+
+/* start--去除webkit的默认样式--start */
+.u-fix-ios-appearance {
+	-webkit-appearance:none;
+}
+/* end--去除webkit的默认样式--end */
+
+/* start--icon图标外层套一个view，让其达到更好的垂直居中的效果--start */
+.u-icon-wrap {
+	display: flex;
+	align-items: center;
+}
+/* end-icon图标外层套一个view，让其达到更好的垂直居中的效果--end */
+
+/* start--iPhoneX底部安全区定义--start */
+.safe-area-inset-bottom {
+  padding-bottom: 0;  
+  padding-bottom: constant(safe-area-inset-bottom);  
+  padding-bottom: env(safe-area-inset-bottom);  
+} 
+/* end-iPhoneX底部安全区定义--end */
+
+/* start--各种hover点击反馈相关的类名-start */
+.u-hover-class {
+	// background-color: #f7f8f9!important;
+	opacity: 0.6;
+}
+
+.u-cell-hover {
+	background-color: #f7f8f9!important;
+}
+/* end--各种hover点击反馈相关的类名--end */
+
+/* start--文本行数限制--start */
+.u-line-1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.u-line-2 {
+    -webkit-line-clamp: 2;
+}
+
+.u-line-3 {
+    -webkit-line-clamp: 3;
+}
+
+.u-line-4 {
+    -webkit-line-clamp: 4;
+}
+
+.u-line-5 {
+    -webkit-line-clamp: 5;
+}
+
+.u-line-2, .u-line-3, .u-line-4, .u-line-5 {
+    overflow: hidden;
+	word-break: break-all;
+    text-overflow: ellipsis; 
+    display: -webkit-box; // 弹性伸缩盒
+    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+}
+
+/* end--文本行数限制--end */
+
+
+/* start--Retina 屏幕下的 1px 边框--start */
+.u-border,
+.u-border-bottom,
+.u-border-left,
+.u-border-right,
+.u-border-top,
+.u-border-top-bottom {
+	position: relative
+}
+
+.u-border-bottom:after,
+.u-border-left:after,
+.u-border-right:after,
+.u-border-top-bottom:after,
+.u-border-top:after,
+.u-border:after {
+	/* #ifndef APP-NVUE */
+	content: ' ';
+	/* #endif */
+	position: absolute;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	// 多加0.1%，能解决有时候边框缺失的问题
+	width: 199.8%;
+	height: 199.7%;
+	transform: scale(0.5, 0.5);
+	border: 0 solid $u-border-color;
+	z-index: 2;
+}
+
+.u-border-top:after {
+	border-top-width: 1px
+}
+
+.u-border-left:after {
+	border-left-width: 1px
+}
+
+.u-border-right:after {
+	border-right-width: 1px
+}
+
+.u-border-bottom:after {
+	border-bottom-width: 1px
+}
+
+.u-border-top-bottom:after {
+	border-width: 1px 0
+}
+
+.u-border:after {
+	border-width: 1px
+}
+/* end--Retina 屏幕下的 1px 边框--end */
+
+
+/* start--clearfix--start */
+.u-clearfix:after,
+.clearfix:after {
+	/* #ifndef APP-NVUE */
+	content: '';
+	/* #endif */
+	display: table;
+	clear: both
+}
+/* end--clearfix--end */
+
+/* start--高斯模糊tabbar底部处理--start */
+.u-blur-effect-inset {
+	width: 750rpx;  
+	height: var(--window-bottom);   
+	background-color: #FFFFFF;  
+}
+/* end--高斯模糊tabbar底部处理--end */
+
+/* start--提升H5端uni.toast()的层级，避免被uView的modal等遮盖--start */
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
+/* #endif */
+/* end--提升H5端uni.toast()的层级，避免被uView的modal等遮盖--end */
+
+/* start--去除button的所有默认样式--start */
+.u-reset-button {
+	padding: 0;
+	font-size: inherit;
+	line-height: inherit;
+	background-color: transparent;
+	color: inherit;
+}
+
+.u-reset-button::after {
+   border: none;
+}
+/* end--去除button的所有默认样式--end */
+

package/libs/function/$parent.ts

@@ -0,0 +1,22 @@
+// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+// 这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
+// 值(默认为undefined)，就是查找最顶层的$parent
+import { type ComponentInternalInstance, getCurrentInstance } from 'vue';
+
+export default function $parent(componentName?: string, _instance: ComponentInternalInstance | null | undefined = null) {
+
+    const instance: ComponentInternalInstance | null | undefined = _instance || getCurrentInstance();
+    let parent = instance && (instance.parent as ComponentInternalInstance | null | undefined);
+
+    if(!componentName) return parent;
+
+    while (parent) {
+        const name = (parent.type as any)?.name as string | undefined;
+        if (name === componentName) {
+            return parent;
+        }
+        parent = parent.parent;
+    }
+    return null;
+}

package/libs/function/addUnit.ts

@@ -0,0 +1,13 @@
+import validation from './test';
+
+/**
+ * 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
+ * @param value 输入值，可以为字符串或数字，默认'auto'
+ * @param unit 单位，默认'rpx'
+ * @returns 添加单位后的字符串
+ */
+export default function addUnit(value: string | number = 'auto', unit: string = 'rpx'): string {
+    const strValue = String(value);
+    // 用uView内置验证规则中的number判断是否为数值
+    return validation.number(strValue) ? `${strValue}${unit}` : strValue;
+}

package/libs/function/color.ts

@@ -0,0 +1,37 @@
+// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
+// 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
+let color = {
+	primary: "#2979ff",
+	primaryDark: "#2b85e4",
+	primaryDisabled: "#a0cfff",
+	primaryLight: "#ecf5ff",
+	bgColor: "#f3f4f6",
+	
+	info: "#909399",
+	infoDark: "#82848a",
+	infoDisabled: "#c8c9cc",
+	infoLight: "#f4f4f5",
+	
+	warning: "#ff9900",
+	warningDark: "#f29100",
+	warningDisabled: "#fcbd71",
+	warningLight: "#fdf6ec",
+	
+	error: "#fa3534",
+	errorDark: "#dd6161",
+	errorDisabled: "#fab6b6",
+	errorLight: "#fef0f0",
+	
+	success: "#19be6b",
+	successDark: "#18b566",
+	successDisabled: "#71d5a1",
+	successLight: "#dbf1e1",
+	
+	mainColor: "#303133",
+	contentColor: "#606266",
+	tipsColor: "#909399",
+	lightColor: "#c0c4cc",
+	borderColor: "#e4e7ed"
+}
+
+export default color;

package/libs/function/colorGradient.ts

@@ -0,0 +1,123 @@
+/**
+ * 求两个颜色之间的渐变值
+ * @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;
+    }
+}
+
+/**
+ * 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

@@ -0,0 +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;

package/libs/function/deepClone.ts

@@ -0,0 +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;

package/libs/function/deepMerge.ts

@@ -0,0 +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;

package/libs/function/getParent.ts

@@ -0,0 +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 {};
+}

package/libs/function/getRect.ts

@@ -0,0 +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();
+    });
+}

package/libs/function/guid.ts

@@ -0,0 +1,42 @@
+/**
+ * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85
+ * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier)
+ * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题
+ * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱
+ * v-for的时候,推荐使用后端返回的id而不是循环的index
+ * @param len uuid的长度，默认32
+ * @param firstU 将返回的首字母置为"u"，默认true
+ * @param radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+ * @returns 生成的uuid字符串
+ */
+function guid(len: number = 32, firstU: boolean = true, radix?: number): string {
+    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+    const uuid: string[] = [];
+    const base = radix || chars.length;
+
+    if (len) {
+        // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+        for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * base)];
+    } else {
+        let r: number;
+        // rfc4122标准要求返回的uuid中,某些位为固定的字符
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+        uuid[14] = '4';
+
+        for (let i = 0; i < 36; i++) {
+            if (!uuid[i]) {
+                r = 0 | (Math.random() * 16);
+                uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+            }
+        }
+    }
+    // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guid不能用作id或者class
+    if (firstU) {
+        uuid.shift();
+        return 'u' + uuid.join('');
+    } else {
+        return uuid.join('');
+    }
+}
+
+export default guid;