uview-plus 3.3.8 → 3.3.9

package/changelog.md

@@ -1,3 +1,20 @@
+## 3.3.9（2024-08-01）
+fix: 优化获取nvue元素
+
+feat: modal新增contentTextAlign设置文案对齐方式
+
+fix: 修复NVUE下tabbar文字不显示  #458
+
+feat: loading-page增加zIndex属性
+
+fix: 相册在宽度较小时换行问题
+
+feat: album相册增加自适应自动换行模式
+
+feat: album相册增加图片尺寸单位prop
+
+fix: 修复calendar日历月份居中
+
 ## 3.3.8（2024-07-31）
 feat: slider支持进度条任意位置触发按钮拖动
 

package/components/u-album/props.js

@@ -66,6 +66,16 @@ export const props = defineMixin({
         radius: {
             type: [String, Number],
             default: () => defProps.image.radius
+        },
+        // 自适应换行
+        autoWrap: {
+            type: Boolean,
+            default: () => defProps.album.autoWrap
+        },
+        // 单位
+        unit: {
+            type: [String],
+            default: () => defProps.album.unit
         }
     }
 })

package/components/u-album/u-album.vue

@@ -6,6 +6,7 @@
             v-for="(arr, index) in showUrls"
             :forComputedUse="albumWidth"
             :key="index"
+            :style="{flexWrap: autoWrap ? 'wrap' : 'nowrap'}"
         >
             <view
                 class="u-album__row__wrapper"
@@ -85,6 +86,8 @@ const dom = uni.requireNativePlugin('dom')
  * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
  * @property {String}          shape            图片形状，circle-圆形，square-方形 （默认 'square' ）
  * @property {String | Number} radius           圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+ * @property {Boolean}         autoWrap         自适应换行模式，不受rowCount限制，图片会自动换行 （默认 false ）
+ * @property {String}          unit             图片单位 （默认 px ）
  * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
  * @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album>
  */
@@ -124,42 +127,48 @@ export default {
                     marginBottom: addUnit(space)
                 }
                 // 如果为最后一行，则每个图片都无需下边框
-                if (index1 === rowLen) style.marginBottom = 0
+                if (index1 === rowLen && !this.autoWrap) style.marginBottom = 0
                 // 每行的最右边一张和总长度的最后一张无需右边框
-                if (
-                    index2 === rowCount ||
-                    (index1 === rowLen &&
-                        index2 === this.showUrls[index1 - 1].length)
-                )
-                    style.marginRight = 0
+                if (!this.autoWrap) {
+                    if (
+                        index2 === rowCount ||
+                        (index1 === rowLen &&
+                            index2 === this.showUrls[index1 - 1].length)
+                    )
+                        style.marginRight = 0
+                }
                 return style
             }
         },
         // 将数组划分为二维数组
         showUrls() {
-            const arr = []
-            this.urls.map((item, index) => {
-                // 限制最大展示数量
-                if (index + 1 <= this.maxCount) {
-                    // 计算该元素为第几个素组内
-                    const itemIndex = Math.floor(index / this.rowCount)
-                    // 判断对应的索引是否存在
-                    if (!arr[itemIndex]) {
-                        arr[itemIndex] = []
+            if (this.autoWrap) {
+                return [ this.urls.slice(0, this.maxCount) ];
+            } else {
+                const arr = []
+                this.urls.map((item, index) => {
+                    // 限制最大展示数量
+                    if (index + 1 <= this.maxCount) {
+                        // 计算该元素为第几个素组内
+                        const itemIndex = Math.floor(index / this.rowCount)
+                        // 判断对应的索引是否存在
+                        if (!arr[itemIndex]) {
+                            arr[itemIndex] = []
+                        }
+                        arr[itemIndex].push(item)
                     }
-                    arr[itemIndex].push(item)
-                }
-            })
-            return arr
+                })
+                return arr
+            }
         },
         imageWidth() {
             return addUnit(
-                this.urls.length === 1 ? this.singleWidth : this.multipleSize
+                this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit
             )
         },
         imageHeight() {
             return addUnit(
-                this.urls.length === 1 ? this.singleHeight : this.multipleSize
+                this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit
             )
         },
         // 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
@@ -248,7 +257,6 @@ export default {
 
     &__row {
         @include flex(row);
-        flex-wrap: wrap;
 
         &__wrapper {
             position: relative;

package/components/u-calendar/month.vue

@@ -469,6 +469,7 @@
 
 		&__title {
 			display: flex;
+			flex-direction: column;
 			font-size: 14px;
 			line-height: 42px;
 			height: 42px;

package/components/u-index-list/u-index-list.vue

@@ -441,7 +441,14 @@
 					// #endif
 
 					// #ifdef APP-NVUE
-					dom.getComponentRect(this.$refs.header, res => {
+					let headerRef = this.$refs.header
+					if (!headerRef) {
+						resolve({
+							width: 0,
+							height: 0
+						})
+					}
+					dom.getComponentRect(headerRef, res => {
 						resolve(res.size)
 					})
 					// #endif

package/components/u-loading-page/props.js

@@ -47,6 +47,11 @@ export const props = defineMixin({
         loadingColor: {
             type: String,
             default: () => defProps.loadingPage.loadingColor
-        }
+        },
+        // 层级
+        zIndex: {
+            type: [Number],
+            default: () => defProps.loadingPage.zIndex
+        },
     }
 })

package/components/u-loading-page/u-loading-page.vue

@@ -9,6 +9,8 @@
             bottom: 0,
             backgroundColor: bgColor,
             display: 'flex',
+            zIndex: zIndex,
+            ...customStyle
         }"
     >
         <view class="u-loading-page">
@@ -64,6 +66,7 @@ import { addUnit } from '../../libs/function/index';
  * @property {String | Number}	fontSize		文字大小 （默认 19 ）
  * @property {String | Number}	iconSize		图标大小 （默认 28 ）
  * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
+ * @property {Number}			zIndex	        z-index层级 （默认10 ）
  * @property {Object}			customStyle		自定义样式
  * @example <u-loading mode="circle"></u-loading>
  */

package/components/u-modal/props.js

@@ -81,6 +81,11 @@ export const props = defineMixin({
         confirmButtonShape: {
             type: String,
             default: () => defProps.modal.confirmButtonShape
-        }
+        },
+        // 文案对齐方式
+        contentTextAlign: {
+            type: String,
+            default: () => defProps.modal.contentTextAlign
+        },
     }
 })

package/components/u-modal/u-modal.vue

@@ -31,7 +31,9 @@
 				}"
 			>
 				<slot>
-					<text class="u-modal__content__text">{{ content }}</text>
+					<text class="u-modal__content__text" :style="{textAlign: contentTextAlign}">
+						{{ content }}
+					</text>
 				</slot>
 			</view>
 			<view

package/components/u-tabbar-item/u-tabbar-item.vue

@@ -127,10 +127,9 @@
 		justify-content: center;
 		flex: 1;
 		/* #ifndef APP-NVUE */
-		
-		/* #endif */
 		width: 100%;
 		height: 100%;
+		/* #endif */
 		/* #ifdef H5 */
 		cursor: pointer;
 		/* #endif */

package/libs/config/props/album.js

@@ -20,6 +20,8 @@ export default {
         maxCount: 9,
         previewFullImage: true,
         rowCount: 3,
-        showMore: true
+        showMore: true,
+        autoWrap: false,
+        unit: 'px'
     }
 }

package/libs/config/props/loadingPage.js

@@ -18,6 +18,7 @@ export default {
         color: '#C8C8C8',
         fontSize: 19,
         iconSize: 28,
-        loadingColor: '#C8C8C8'
+        loadingColor: '#C8C8C8',
+        zIndex: 10
     }
 }

package/libs/config/props/modal.js

@@ -25,6 +25,7 @@ export default {
         closeOnClickOverlay: false,
         negativeTop: 0,
         width: '650rpx',
-        confirmButtonShape: ''
+        confirmButtonShape: '',
+        contentTextAlign: 'left'
     }
 }

package/libs/mixin/mixin.js

@@ -130,8 +130,15 @@ export const mixin = defineMixin({
                     let selectorNvue = selector.substring(1) // 去掉开头的#或者.
                     let selectorRef = this.$refs[selectorNvue]
                     if (!selectorRef) {
-                        console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
-                        resolve({}) 
+                        // console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
+                        resolve({
+                            with: 0,
+                            height: 0,
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            bottom: 0
+                        }) 
                     }
                     dom.getComponentRect(selectorRef, res => {
                         // console.log(res)

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "uview-plus3.0重磅发布，全面的Vue3移动组件库。",
-	"version": "3.3.8",
+	"version": "3.3.9",
 	"description": "uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",