uview-plus 3.4.28 → 3.4.30

package/changelog.md

@@ -1,3 +1,27 @@
+## 3.4.30（2025-05-16）
+feat: 新增pagination分页器组件
+
+feat: popup新增bottom插槽适用类似关闭按钮与内容区域分离的场景
+
+## 3.4.29（2025-05-15）
+fix: 修复table2横向滚动样式
+
+fix: 修复table2组件宽度兼容
+
+fix: 修复image显示png图片时默认背景色问题
+
+feat: cate-tab新增height参数便于设置组件高度
+
+feat: 在index.js种导出digit.js便于使用
+
+fix: 修复tag组件缺失iconColor属性
+
+fix: 优化index-list的setValueForTouch方法逻辑 #708
+
+feat: number-box支持change事件返回变动是点击了增加还是减少按钮
+
+fix: 修复table2在小程序下部分情形不显示表格
+
 ## 3.4.28（2025-05-12）
 feat: 新增table表格组件
 

package/components/u-cate-tab/u-cate-tab.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="u-cate-tab">
+	<view class="u-cate-tab" :style="{ height: addUnit(height) }">
 		<view class="u-cate-tab__wrap">
 			<scroll-view class="u-cate-tab__view u-cate-tab__menu-scroll-view"
                 scroll-y scroll-with-animation :scroll-top="scrollTop"
@@ -41,9 +41,14 @@
 	</view>
 </template>
 <script>
+	import { addUnit } from '../../libs/function/index';
 	export default {
 		name: 'up-cate-tab',
         props: {
+			height: {
+                type: String,
+                default: '100%'
+            },
             tabList: {
                 type: Array,
                 default: () => {
@@ -57,7 +62,7 @@
             itemKeyName: {
                 type: String,
                 default: 'name'
-            },
+            },
 			current: {
                 type: Number,
                 default: 0
@@ -67,7 +72,7 @@
             tabList() {
                 this.getMenuItemTop()
             }
-        },
+        },
 		emits: ['update:current'],
 		data() {
 			return {
@@ -84,18 +89,19 @@
 				timer: null, // 定时器
 			}
 		},
-		onMounted() {
-			this.innerCurrent = this.current;
+		onMounted() {
+			this.innerCurrent = this.current;
 			this.leftMenuStatus(this.innerCurrent);
 			this.getMenuItemTop()
-		},
-		watch: {
-			current(nval) {
-				this.innerCurrent = nval;
-				this.leftMenuStatus(this.innerCurrent);
-			}
+		},
+		watch: {
+			current(nval) {
+				this.innerCurrent = nval;
+				this.leftMenuStatus(this.innerCurrent);
+			}
 		},
 		methods: {
+			addUnit,
 			// 点击左边的栏目切换
 			async swichMenu(index) {
 				if(this.arr.length == 0) {
@@ -106,7 +112,7 @@
 				this.$nextTick(function(){
 					this.scrollRightTop = this.arr[index];
 					this.innerCurrent = index;
-					this.leftMenuStatus(index);
+					this.leftMenuStatus(index);
 					this.$emit('update:current', index);
 				})
 			},
@@ -140,14 +146,14 @@
 					}).observe('#item' + index, res => {
 						if (res.intersectionRatio > 0) {
 							let id = res.id.substring(4);
-							this.leftMenuStatus(id);
+							this.leftMenuStatus(id);
 						}
 					})
 				})
 			},
 			// 设置左边菜单的滚动状态
 			async leftMenuStatus(index) {
-				this.innerCurrent = index;
+				this.innerCurrent = index;
 				this.$emit('update:current', index);
 				// 如果为0，意味着尚未初始化
 				if (this.menuHeight == 0 || this.menuItemHeight == 0) {

package/components/u-image/u-image.vue

@@ -45,7 +45,10 @@
 				v-if="showError && isError && !loading"
 				class="u-image__error"
 				:style="{
-					borderRadius: shape == 'circle' ? '50%' : addUnit(radius)
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+					backgroundColor: this.bgColor,
+					width: addUnit(width),
+					height: addUnit(height)
 				}"
 			>
 				<slot name="error">
@@ -220,9 +223,9 @@
 			// 移除图片的背景色
 			removeBgColor() {
 				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
-				this.backgroundStyle = {
-					backgroundColor: this.bgColor || '#ffffff'
-				};
+				// this.backgroundStyle = {
+				// 	backgroundColor: this.bgColor || '#ffffff'
+				// };
 			}
 		}
 	};

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

@@ -419,7 +419,7 @@
 					return child
 				})
 				// console.log('this.children[currentIndex].top', children[currentIndex].top)
-				if (children[currentIndex]?.top) {
+				if (children[currentIndex]?.top || children[currentIndex].top === 0) {
 					this.scrollTop = children[currentIndex].top - getPx(customNavHeight)
 				}
 				// #endif

package/components/u-number-box/u-number-box.vue

@@ -331,8 +331,8 @@
 				// #endif 
 			
 			},
-			// 发出change事件
-			emitChange(value) {
+			// 发出change事件，type目前只支持点击时有值，手动输入不支持。
+			emitChange(value, type = '') {
 				// 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
 				if (!this.asyncChange) {
 					this.$nextTick(() => {
@@ -349,6 +349,7 @@
 				this.$emit('change', {
 					value,
 					name: this.name,
+					type: type // 当前变更类型
 				});
 			},
 			onChange() {
@@ -360,7 +361,7 @@
 				}
 				const diff = type === 'minus' ? -this.step : +this.step
 				const value = this.format(this.add(+this.currentValue, diff))
-				this.emitChange(value)
+				this.emitChange(value, type)
 				this.$emit(type)
 			},
 			// 对值扩大后进行四舍五入，再除以扩大因子，避免出现浮点数操作的精度问题

package/components/u-pagination/u-pagination.vue

@@ -0,0 +1,283 @@
+<template>
+  <view class="u-pagination">
+    <!-- 上一页按钮 -->
+    <view
+      :class="[
+        'u-pagination-btn',
+        { disabled: currentPage === 1 }
+      ]"
+      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
+      @click="prev"
+    >
+      <template v-if="prevText">
+        {{ prevText }}
+      </template>
+      <up-icon v-else name="arrow-left"></up-icon>
+    </view>
+
+    <!-- 页码列表 -->
+    <block v-for="page in displayedPages" :key="page" v-if="layout.includes('pager')">
+      <view
+        :class="[
+          'u-pagination-item',
+          { active: page === currentPage }
+        ]"
+        @click="goTo(page)"
+      >
+        {{ page }}
+      </view>
+    </block>
+
+    <!-- 总数显示 -->
+    <view v-if="total > 0 && layout.includes('total')" class="u-pagination-total">
+        {{ currentPage }} / {{ totalPages }}
+    </view>
+
+    <!-- 每页数量选择器 -->
+    <!-- <picker
+      v-if="layout.includes('sizes')"
+      mode="selector"
+      :range="pageSizes"
+      range-key="label"
+      :value="pageSizeIndex"
+      @change="handleSizeChange"
+      class="u-pagination-sizes"
+    >
+      <view>{{ pageSizeLabel }}</view>
+    </picker> -->
+
+    <!-- 下一页按钮 -->
+    <view
+      :class="[
+        'u-pagination-btn',
+        { disabled: currentPage === totalPages }
+      ]"
+      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
+      @click="next"
+    >
+      <template v-if="nextText">
+        下一页
+      </template>
+      <up-icon v-else name="arrow-right"></up-icon>
+    </view>
+
+    <!-- 跳转输入框 -->
+    <!-- <view v-if="layout.includes('jumper')">
+      <text>前往</text>
+      <input
+        type="number"
+        class="u-pagination-jumper"
+        :value="currentPageInput"
+        @input="onInputPage"
+        @confirm="onConfirmPage"
+      />
+      <text>页</text>
+    </view> -->
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'u-pagination',
+  props: {
+    // 当前页码
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条目数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 总数据条目数
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 上一页按钮文案
+    prevText: {
+      type: String,
+      default: ''
+    },
+    // 下一页按钮文案
+    nextText: {
+      type: String,
+      default: ''
+    },
+    buttonBgColor: {
+      type: String,
+      default: '#f5f7fa'
+    },
+    buttonBorderColor: {
+      type: String,
+      default: '#dcdfe6'
+    },
+    // 可选的每页条目数
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 30, 40, 50]
+    },
+    // 布局方式（类似 el-pagination）
+    layout: {
+      type: String,
+      default: 'prev, pager, next'
+    },
+    // 是否隐藏只有一个页面时的分页控件
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:currentPage', 'update:pageSize', 'current-change', 'size-change'],
+  data() {
+    return {
+      currentPageInput: this.currentPage + ''
+    };
+  },
+  computed: {
+    totalPages() {
+      return Math.max(1, Math.ceil(this.total / this.pageSize));
+    },
+    pageSizeIndex() {
+      const index = this.pageSizes.findIndex(size => size.value === this.pageSize);
+      return index >= 0 ? index : 0;
+    },
+    pageSizeLabel() {
+      const found = this.pageSizes.find(size => size.value === this.pageSize);
+      return found?.label || this.pageSize;
+    },
+    displayedPages() {
+        const total = this.totalPages;
+        const current = this.currentPage;
+
+        if (total <= 4) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+
+        const pages = [];
+
+        // 当前页靠近头部
+        if (current <= 2) {
+            for (let i = 1; i <= 4; i++) {
+            pages.push(i);
+            }
+            pages.push('...');
+            pages.push(total);
+        }
+        // 当前页在尾部附近
+        else if (current >= total - 1) {
+            pages.push(1);
+            pages.push('...');
+            for (let i = total - 3; i <= total; i++) {
+            pages.push(i);
+            }
+        }
+        // 中间情况
+        else {
+            pages.push(1);
+            pages.push('...');
+            pages.push(current - 1);
+            pages.push(current);
+            pages.push(current + 1);
+            pages.push('...');
+            pages.push(total);
+        }
+
+        return pages;
+    }
+    // 控制是否隐藏
+  },
+  watch: {
+    currentPage(val) {
+      this.currentPageInput = val + '';
+    }
+  },
+  methods: {
+    handleSizeChange(e) {
+      const selected = e.detail.value;
+      const size = this.pageSizes[selected]?.value || this.pageSizes[0].value;
+      this.$emit('update:pageSize', size);
+      this.$emit('size-change', size);
+    },
+    prev() {
+      if (this.currentPage > 1) {
+        this.goTo(this.currentPage - 1);
+      }
+    },
+    next() {
+      if (this.currentPage < this.totalPages) {
+        this.goTo(this.currentPage + 1);
+      }
+    },
+    goTo(page) {
+      if (page === '...' || page === this.currentPage) return;
+      this.$emit('update:currentPage', page);
+      this.$emit('current-change', page);
+    },
+    onInputPage(e) {
+      this.currentPageInput = e.detail.value;
+    },
+    onConfirmPage(e) {
+      const num = parseInt(e.detail.value);
+      if (!isNaN(num) && num >= 1 && num <= this.totalPages) {
+        this.goTo(num);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.u-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  font-size: 14px;
+  color: #606266;
+
+  .u-pagination-total {
+    margin-right: 10px;
+  }
+
+  .u-pagination-sizes {
+    margin-right: 10px;
+    padding: 4px 4px;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 4px;
+  }
+
+  .u-pagination-btn {
+    margin: 0 3px;
+    padding: 4px 4px;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 4px;
+    background-color: #f5f7fa;
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .u-pagination-item {
+    margin: 0 2px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    &.active {
+      background-color: #409eff;
+      color: white;
+    }
+  }
+
+  .u-pagination-jumper {
+    width: 40px;
+    height: 28px;
+    margin: 0 5px;
+    padding: 0 5px;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+</style>

package/components/u-popup/u-popup.vue

@@ -51,6 +51,7 @@
 				</view>
 				<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
 			</view>
+			<slot name="bottom"></slot>
 		</u-transition>
 	</view>
 </template>