uview-ultra-plus 1.0.0

package/uview-ultra/libs/css/flex.scss

@@ -0,0 +1,368 @@
+// .u-flex {
+// 	@include vue-flex(row);
+// }
+
+// .u-flex-x {
+// 	@include vue-flex(row);
+// }
+
+// .u-flex-y {
+// 	@include vue-flex(column);
+// }
+
+// .u-flex-xy-center {
+// 	@include vue-flex(row);
+// 	justify-content: center;
+// 	align-items: center;
+// }
+
+// .u-flex-x-center {
+// 	@include vue-flex(row);
+// 	justify-content: center;
+// }
+
+// .u-flex-y-center {
+// 	@include vue-flex(column);
+// 	justify-content: center;
+// }
+
+
+// flex布局
+.u-flex,
+.u-flex-row,
+.u-flex-x,
+.up-flex,
+.up-flex-row,
+.up-flex-x {
+	@include flex;
+}
+
+.u-flex-y,
+.u-flex-column,
+.up-flex-y,
+.up-flex-column {
+	@include flex(column);
+}
+
+.u-flex-x-center,
+.up-flex-x-center {
+	@include flex;
+	justify-content: center;
+}
+
+.u-flex-xy-center,
+.up-flex-xy-center {
+	@include flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.u-flex-y-center,
+.up-flex-y-center {
+	@include flex;
+	align-items: center;
+}
+
+.u-flex-x-left,
+.up-flex-x-left {
+	@include flex;
+}
+
+.u-flex-x-reverse,
+.u-flex-row-reverse,
+.up-flex-x-reverse,
+.up-flex-row-reverse  {
+	flex-direction: row-reverse;
+}
+
+.u-flex-y-reverse,
+.u-flex-column-reverse,
+.up-flex-y-reverse,
+.up-flex-column-reverse {
+	flex-direction: column-reverse;
+}
+
+/* #ifndef APP-NVUE */
+// 此处为vue版本的简写，因为nvue不支持同时作用于两个类名的样式写法
+// nvue下只能写成class=u-flex-x u-flex-x-reverse的形式
+.u-flex.u-flex-reverse,
+.u-flex-row.u-flex-reverse,
+.u-flex-x.u-flex-reverse,
+.up-flex.up-flex-reverse,
+.up-flex-row.up-flex-reverse,
+.up-flex-x.up-flex-reverse {
+	flex-direction: row-reverse;
+}
+
+.u-flex-column.u-flex-reverse,
+.u-flex-y.u-flex-reverse,
+.up-flex-column.up-flex-reverse,
+.up-flex-y.up-flex-reverse {
+	flex-direction: column-reverse;
+}
+
+// 自动伸缩
+.u-flex-fill,
+.u-flex-fillp {
+	flex: 1 1 auto;
+}
+
+// 边界自动伸缩
+.u-margin-top-auto,
+.u-m-t-auto,
+.up-margin-top-auto,
+.up-m-t-auto {
+	margin-top: auto !important;
+}
+
+.u-margin-right-auto,
+.u-m-r-auto,
+.up-margin-right-auto,
+.up-m-r-auto {
+	margin-right: auto !important;
+}
+
+.u-margin-bottom-auto,
+.u-m-b-auto,
+.up-margin-bottom-auto,
+.up-m-b-auto {
+	margin-bottom: auto !important;
+}
+
+.u-margin-left-auto,
+.u-m-l-auto,
+.up-margin-left-auto,
+.up-m-l-auto {
+	margin-left: auto !important;
+}
+
+.u-margin-center-auto,
+.u-m-c-auto,
+.up-margin-center-auto,
+.up-m-c-auto {
+	margin-left: auto !important;
+	margin-right: auto !important;
+}
+
+.u-margin-middle-auto,
+.u-m-m-auto,
+.up-margin-middle-auto,
+.up-m-m-auto {
+	margin-top: auto !important;
+	margin-bottom: auto !important;
+}
+/* #endif */
+
+// 换行
+.u-flex-wrap,
+.up-flex-wrap {
+	flex-wrap: wrap;
+}
+
+// 反向换行
+.u-flex-wrap-reverse,
+.up-flex-wrap-reverse {
+	flex-wrap: wrap-reverse;
+}
+
+// 主轴起点对齐
+.u-flex-start,
+.up-flex-start {
+	justify-content: flex-start;
+}
+
+// 主轴中间对齐
+.u-flex-center,
+.up-flex-center {
+	justify-content: center;
+}
+
+// 主轴终点对齐
+.u-flex-end,
+.up-flex-end {
+	justify-content: flex-end;
+}
+
+// 主轴等比间距
+.u-flex-between,
+.up-flex-between {
+	justify-content: space-between;
+}
+
+// 主轴均分间距
+.u-flex-around,
+.up-flex-around {
+	justify-content: space-around;
+}
+
+// 交叉轴起点对齐
+.u-flex-items-start,
+.up-flex-items-start {
+	align-items: flex-start;
+}
+
+// 交叉轴中间对齐
+.u-flex-items-center,
+.up-flex-items-center {
+	align-items: center;
+}
+
+// 交叉轴终点对齐
+.u-flex-items-end,
+.up-flex-items-end {
+	align-items: flex-end;
+}
+
+// 交叉轴第一行文字基线对齐
+.u-flex-items-baseline,
+.up-flex-items-baseline {
+	/* #ifndef APP-NVUE */
+	/* #ifndef UNI-APP-X */
+	align-items: baseline;
+	/* #endif */
+	/* #endif */
+}
+
+// 交叉轴方向拉伸对齐
+.u-flex-items-stretch,
+.up-flex-items-stretch {
+	align-items: stretch;
+}
+
+
+// 以下属于项目(子元素)的类
+
+// 子元素交叉轴起点对齐
+/* #ifndef APP-NVUE */
+.u-flex-self-start,
+.up-flex-self-start {
+	align-self: flex-start;
+}
+
+// 子元素交叉轴居中对齐
+.u-flex-self-center,
+.up-flex-self-center {
+	align-self: center;
+}
+
+// 子元素交叉轴终点对齐
+.u-flex-self-end,
+.up-flex-self-end {
+	align-self: flex-end;
+}
+
+// 子元素交叉轴第一行文字基线对齐
+.u-flex-self-baseline,
+.up-flex-self-baseline {
+	/* #ifndef UNI-APP-X */
+	align-self: baseline;
+	/* #endif */
+}
+
+// 子元素交叉轴方向拉伸对齐
+.u-flex-self-stretch,
+.up-flex-self-stretch {
+	align-self: stretch;
+}
+/* #endif */
+// 多轴交叉时的对齐方式
+
+// 起点对齐
+/* #ifndef APP-NVUE */
+.u-flex-content-start,
+.up-flex-content-start {
+	align-content: flex-start;
+}
+
+// 居中对齐
+.u-flex-content-center,
+.up-flex-content-center {
+	align-content: center;
+}
+
+// 终点对齐
+.u-flex-content-end,
+.up-flex-content-end {
+	align-content: flex-end;
+}
+
+// 两端对齐
+.u-flex-content-between,
+.up-flex-content-between {
+	align-content: space-between;
+}
+
+// 均分间距
+.u-flex-content-around,
+.up-flex-content-around {
+	align-content: space-around;
+}
+
+// 全部居中对齐
+.u-flex-middle,
+.up-flex-middle {
+	justify-content: center;
+	align-items: center;
+	align-self: center;
+	align-content: center;
+}
+
+// 是否可以放大
+.u-flex-grow,
+.up-flex-grow {
+	flex-grow: 1;
+}
+
+// 是否可以缩小
+.u-flex-shrink,
+.up-flex-shrink {
+	flex-shrink: 1;
+}
+
+/* #endif */
+
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+	// 只要双数和能被5除尽的数
+	@if $i % 2 == 0 or $i % 5 == 0 {
+		// 得出：up-margin-30或者u-m-30
+		.u-margin-#{$i}, .u-m-#{$i},
+		.up-margin-#{$i}, .up-m-#{$i} {
+			margin: $i + rpx!important;
+		}
+		
+		// 得出：up-padding-30或者u-p-30
+		.u-padding-#{$i}, .u-p-#{$i},
+		.up-padding-#{$i}, .up-p-#{$i} {
+			padding: $i + rpx!important;
+		}
+		
+		@each $short, $long in l left, t top, r right, b bottom {
+			// 缩写版，结果如： up-m-l-30
+			// 定义外边距
+			.u-m-#{$short}-#{$i},
+			.up-m-#{$short}-#{$i} {
+				margin-#{$long}: $i + rpx!important;
+			}
+			
+			// 定义内边距
+			.u-p-#{$short}-#{$i},
+			.up-p-#{$short}-#{$i} {
+				padding-#{$long}: $i + rpx!important;
+			}
+			
+			// 完整版，结果如：up-margin-left-30
+			// 定义外边距
+			.u-margin-#{$long}-#{$i},
+			.up-margin-#{$long}-#{$i} {
+				margin-#{$long}: $i + rpx!important;
+			}
+			
+			// 定义内边距
+			.u-padding-#{$long}-#{$i},
+			.up-padding-#{$long}-#{$i} {
+				padding-#{$long}: $i + rpx!important;
+			}
+		}
+	}
+}

package/uview-ultra/libs/css/mixin.scss

@@ -0,0 +1,8 @@
+// 通过scss的mixin功能，把原来需要写4行的css，变成一行
+// 目的是保持代码干净整洁，不至于在nvue下，到处都要写display:flex的条件编译
+@mixin flex($direction: row) {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: $direction;
+}

package/uview-ultra/libs/css/vue.scss

@@ -0,0 +1,35 @@
+// 历遍生成4个方向的底部安全区
+@each $d in top, right, bottom, left {
+	.u-safe-area-inset-#{$d},
+    .up-safe-area-inset-#{$d} {
+		padding-#{$d}: 0;
+		// #ifndef UNI-APP-X
+		padding-#{$d}: constant(safe-area-inset-#{$d});  
+		padding-#{$d}: env(safe-area-inset-#{$d});
+		// #endif
+		// #ifdef UNI-APP-X
+		padding-#{$d}: var(--uni-safe-area-inset-#{$d});
+		// #endif
+	}
+}
+
+//提升H5端uni.toast()的层级，避免被uView的modal等遮盖
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
+/* #endif */
+
+// 隐藏scroll-view的滚动条
+/* #ifdef H5 */
+::-webkit-scrollbar {
+    display: none;  
+    width: 0 !important;  
+    height: 0 !important;  
+    -webkit-appearance: none;  
+    background: transparent;  
+}
+/* #endif */

package/uview-ultra/libs/function/colorGradient.js

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