uview-plus 3.5.28 → 3.5.39

package/changelog.md

@@ -1,3 +1,38 @@
+## 3.5.39（2025-09-07）
+fix: 修复cascader多语言问题
+
+## 3.5.38（2025-09-07）
+improvment: 完善演示图标
+
+## 3.5.37（2025-09-05）
+feat: cascader支持多语言
+
+## 3.5.36（2025-09-04）
+improvment: 补充图标
+
+## 3.5.35（2025-09-04）
+feat: cascader级联组件增加垂直头部与单列选项支持
+
+## 3.5.34（2025-09-03）
+improvement: 优化steps-item
+
+## 3.5.33（2025-09-02）
+升级uni-app至最新版
+## 3.5.32（2025-09-01）
+feat: cate-tab支持非联动跟随的单一切换模式
+
+feat: choose组件示例使用cate-tab的单一切换模式
+
+
+## 3.5.31（2025-09-01）
+feat: 新增choose通用选项选择器组件
+
+## 3.5.30（2025-08-31）
+fix: 修复缺失cascader级联选择器
+
+## 3.5.29（2025-08-30）
+feat: 新增cascader级联选择器
+
 ## 3.5.28（2025-08-29）
 feat: 多语言增加泰语
 

package/components/u-cascader/u-cascader.vue

@@ -0,0 +1,333 @@
+<template>
+	<up-popup :show="popupShow" mode="bottom" :popup="false"
+		:mask="true" :closeable="true" :safe-area-inset-bottom="true"
+		close-icon-color="#ffffff" :z-index="uZIndex"
+		:maskCloseAble="maskCloseAble" @close="close">
+		<view class="up-p-t-30 up-p-l-20 up-m-b-10" v-if="headerDirection =='column'">
+			<up-steps v-if="popupShow" dot direction="column" v-model:current="tabsIndex">
+				<up-steps-item  v-for="(item, index) in genTabsList"
+					@click="tabsIndex = index" :title="item.name"></up-steps-item>
+			</up-steps>
+		</view>
+		<view class="up-p-t-20 up-m-b-10" v-else>
+			<up-tabs v-if="popupShow" :list="genTabsList"
+				:scrollable="true" v-model:current="tabsIndex" @change="tabsChange" ref="tabs"></up-tabs>
+		</view>
+		<view class="area-box">
+			<view class="u-flex" :class="{ 'change':isChange }"
+				:style="{transform: optionsCols == 2 && isChange ? 'translateX(-33.3333333%)' : ''}">
+				<template v-for="(levelData, levelIndex) in levelList" :key="levelIndex">
+					<view v-if="optionsCols == 2 || levelIndex == tabsIndex" class="area-item"
+						:style="{ width: optionsCols == 2 ? '33.33333%' : '750rpx'}">
+						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
+							<scroll-view :scroll-y="true" style="height: 100%">
+								<up-cell-group v-if="levelIndex === 0 || selectedValueIndexs[levelIndex - 1] !== undefined">
+									<up-cell v-for="(item,index) in levelData"
+										:title="item[labelKey]" :arrow="false"
+										:index="index" :key="index"
+										@click="levelChange(levelIndex, index)">
+										<template v-slot:right-icon>
+											<up-icon v-if="selectedValueIndexs[levelIndex] === index"
+												size="17" name="checkbox-mark"></up-icon>
+										</template>
+									</up-cell>
+								</up-cell-group>
+							</scroll-view>
+						</view>
+					</view>
+				</template>
+			</view>
+		</view>
+		<!-- 添加按钮区域 -->
+		<view class="u-cascader-action up-flex up-flex-between">
+			<view class="u-padding-20 up-flex-fill">
+				<up-button @click="handleCancel" type="default">{{ t("up.common.cancel") }}</up-button>
+			</view>
+			<view class="u-padding-20 up-flex-fill">
+				<up-button @click="handleConfirm" type="primary">{{ t("up.common.confirm") }}</up-button>
+			</view>
+		</view>
+	</up-popup>
+</template>
+
+<script>
+	/**
+	 * u-cascader 通用无限级联选择器
+	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
+	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
+	 * @property {Array} data 级联数据
+	 * @property {Array} default-value 默认选中的值
+	 * @property {String} valueKey 指定选项的值为选项对象中的哪个属性值
+	 * @property {String} labelKey 指定选项标签为选项对象中的哪个属性值
+	 * @property {String} childrenKey 指定选项的子选项为选项对象中的哪个属性值
+	 * @property {Boolean} autoClose 是否在选择最后一级时自动关闭并触发confirm（默认false）
+	 */
+	import { t } from '../../libs/i18n'
+	export default {
+		name: 'up-cascader',
+		props: {
+			// 通过双向绑定控制组件的弹出与收起
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// 级联数据
+			data: {
+				type: Array,
+				default() {
+					return [];
+				}
+			},
+			// 默认选中的值
+			modelValue: {
+				type: Array,
+				default() {
+					return [];
+				}
+			},
+			// 指定选项的值为选项对象中的哪个属性值
+			valueKey: {
+				type: String,
+				default: 'value'
+			},
+			// 指定选项标签为选项对象中的哪个属性值
+			labelKey: {
+				type: String,
+				default: 'label'
+			},
+			// 指定选项的子选项为选项对象中的哪个属性值
+			childrenKey: {
+				type: String,
+				default: 'children'
+			},
+			// 是否允许通过点击遮罩关闭Picker
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出的z-index值
+			zIndex: {
+				type: [String, Number],
+				default: 0
+			},
+			// 是否在选择最后一级时自动关闭并触发confirm
+			autoClose: {
+				type: Boolean,
+				default: false
+			},
+			// 选中项目的展示方向direction垂直方向适合文字长度过长
+			headerDirection: {
+				type: String,
+				default: 'row'
+			},
+			// 选项区域列数，支持1列和2列，默认为2列
+			optionsCols: {
+				type: [Number],
+				default: 2
+			}
+		},
+		data() {
+			return {
+				// 存储每一级的数据
+				levelList: [],
+				// 存储每一级选中的索引
+				selectedValueIndexs: [],
+				tabsIndex: 0,
+				popupShow: false,
+				// 新增confirmValues用于存储确认的值
+				confirmValues: []
+			}
+		},
+		watch: {
+			data: {
+				handler() {
+					this.initLevelList();
+				},
+				immediate: true
+			},
+			show() {
+				this.popupShow = this.show;
+			},
+			modelValue: {
+				handler() {
+					this.init();
+				},
+				immediate: true
+			}
+		},
+		computed: {
+			t,
+			isChange() {
+				return this.tabsIndex > 1;
+			},
+			genTabsList() {
+				let tabsList = [{
+					name: "请选择"
+				}];
+				
+				// 根据选中的值动态生成tabs
+				for (let i = 0; i < this.selectedValueIndexs.length; i++) {
+					if (this.selectedValueIndexs[i] !== undefined && this.levelList[i]) {
+						const selectedItem = this.levelList[i][this.selectedValueIndexs[i]];
+						if (selectedItem) {
+							tabsList[i] = {
+								name: selectedItem[this.labelKey]
+							};
+							// 如果还有下一级，则添加"请选择"
+							if (i === this.selectedValueIndexs.length - 1 && 
+								selectedItem[this.childrenKey] && 
+								selectedItem[this.childrenKey].length > 0) {
+								tabsList.push({
+									name: "请选择"
+								});
+							}
+						}
+					}
+				}
+				
+				return tabsList;
+			},
+			uZIndex() {
+				// 如果用户有传递z-index值，优先使用
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		// 新增confirm事件
+		emits: ['update:modelValue', 'change', 'confirm'],
+		methods: {
+			init() {
+				// 初始化选中值
+				if (this.modelValue && this.modelValue.length > 0) {
+					this.setDefaultValue();
+				}
+			},
+			initLevelList() {
+				// 初始化第一级数据
+				if (this.data && this.data.length > 0) {
+					this.levelList = [this.data];
+					this.selectedValueIndexs = [];
+				}
+			},
+			setDefaultValue() {
+				// 根据默认值设置选中项
+				// 根据modelValue获取indexs给selectedValueIndexs
+				this.selectedValueIndexs = [];
+				let currentLevelData = this.data;
+				
+				for (let i = 0; i < this.modelValue.length; i++) {
+					const value = this.modelValue[i];
+					const index = currentLevelData.findIndex(item => item[this.valueKey] === value);
+					
+					if (index !== -1) {
+						this.selectedValueIndexs.push(index);
+						// 更新下一级的数据
+						if (currentLevelData[index][this.childrenKey]) {
+							currentLevelData = currentLevelData[index][this.childrenKey];
+						} else {
+							// 如果没有子级数据，则停止处理
+							break;
+						}
+					} else {
+						// 如果找不到匹配项，则停止处理
+						break;
+					}
+				}
+			},
+			close() {
+				this.$emit('update:show', false);
+			},
+			tabsChange(item) {
+			},
+			levelChange(levelIndex, index) {
+				// 设置当前级的选中值
+				this.$set(this.selectedValueIndexs, levelIndex, index);
+				
+				// 清除后续级别的选中值
+				for (let i = levelIndex + 1; i < this.selectedValueIndexs.length; i++) {
+					this.$set(this.selectedValueIndexs, i, undefined);
+				}
+				
+				// 获取当前选中项
+				const currentItem = this.levelList[levelIndex][index];
+				
+				// 如果有子级数据，则初始化下一级
+				if (currentItem && currentItem[this.childrenKey] && currentItem[this.childrenKey].length > 0) {
+					// 确保levelList数组足够长
+					if (this.levelList.length <= levelIndex + 1) {
+						this.levelList.push(currentItem[this.childrenKey]);
+					} else {
+						this.$set(this.levelList, levelIndex + 1, currentItem[this.childrenKey]);
+					}
+					// 切换到下一级tab
+					this.tabsIndex = levelIndex + 1;
+				} else {
+					// 没有子级数据，说明是最后一级
+					if (this.autoClose) {
+						// 如果启用自动关闭，则触发change事件并关闭
+						this.emitChange();
+					} else {
+						// 否则只触发change事件，不关闭
+						this.emitChange(false);
+					}
+				}
+			},
+			// 修改emitChange方法，增加closePopup参数
+			emitChange(closePopup = true) {
+				// 构造选中结果
+				const result = [];
+				for (let i = 0; i < this.selectedValueIndexs.length; i++) {
+					if (this.selectedValueIndexs[i] !== undefined && this.levelList[i]) {
+						result.push(this.levelList[i][this.selectedValueIndexs[i]][this.valueKey]);
+					}
+				}
+				
+				// 更新confirmValues
+				this.confirmValues = [...result];
+				
+				// 触发change事件，返回value数组
+				this.$emit('change', this.confirmValues);
+				
+				// 根据参数决定是否关闭弹窗
+				if (closePopup) {
+					this.close();
+				}
+			},
+			handleCancel() {
+				this.close();
+			},
+			handleConfirm() {
+				// 确认时触发confirm事件
+				this.$emit('update:modelValue', this.confirmValues);
+				this.$emit('confirm', this.confirmValues);
+				this.close();
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.area-box {
+		width: 100%;
+		overflow: hidden;
+		height: 800rpx;
+
+		>view {
+			width: 150%;
+			transition: transform 0.3s ease-in-out 0s;
+			transform: translateX(0);
+
+			&.change {
+				// transform: translateX(-33.3333333%);
+			}
+		}
+
+		.area-item {
+			// width: 750rpx;
+			height: 800rpx;
+		}
+	}
+	
+	// 添加按钮区域样式
+	.u-cascader-action {
+		border-top: 1px solid #eee;
+	}
+</style>

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

@@ -19,26 +19,28 @@
                 	</slot>
 				</view>
 				<view class="u-cate-tab__page-view">
-					<view class="u-cate-tab__page-item" :id="'item' + index"
-						v-for="(item , index) in tabList" :key="index">
-                        <slot name="itemList" :item="item">
-                        </slot>
-						<template v-if="!$slots['itemList']">
-							<view class="item-title">
-                                <text>{{item[tabKeyName]}}</text>
-                            </view>
-                            <view class="item-container">
-                                <template v-for="(item1, index1) in item.children" :key="index1">
-                                    <slot name="pageItem" :pageItem="item1">
-                                        <view class="thumb-box" >
-                                            <image class="item-menu-image" :src="item1.icon" mode=""></image>
-                                            <view class="item-menu-name">{{item1[itemKeyName]}}</view>
-                                        </view>
-                                    </slot>
-                                </template>
-                            </view>
-						</template>
-					</view>
+					<template :key="index" v-for="(item , index) in tabList">
+						<view v-if="mode == 'follow' || ( mode == 'tab' && index == innerCurrent)"
+							class="u-cate-tab__page-item" :id="'item' + index">
+							<slot name="itemList" :item="item">
+							</slot>
+							<template v-if="!$slots['itemList']">
+								<view class="item-title">
+									<text>{{item[tabKeyName]}}</text>
+								</view>
+								<view class="item-container">
+									<template v-for="(item1, index1) in item.children" :key="index1">
+										<slot name="pageItem" :pageItem="item1">
+											<view class="thumb-box" >
+												<image class="item-menu-image" :src="item1.icon" mode=""></image>
+												<view class="item-menu-name">{{item1[itemKeyName]}}</view>
+											</view>
+										</slot>
+									</template>
+								</view>
+							</template>
+						</view>
+					</template>
 				</view>
 			</scroll-view>
 		</view>
@@ -49,6 +51,10 @@
 	export default {
 		name: 'up-cate-tab',
         props: {
+			mode: {
+                type: String,
+                default: 'follow' // follo跟随联动, tab单一显示。
+            },
 			height: {
                 type: String,
                 default: '100%'
@@ -119,10 +125,13 @@
 			addUnit,
 			// 点击左边的栏目切换
 			async swichMenu(index) {
-				if(this.arr.length == 0) {
-					await this.getMenuItemTop();
+				if (this.mode == 'follow') {
+					if(this.arr.length == 0) {
+						await this.getMenuItemTop();
+					}
+					this.scrollIntoView = 'item' + index;
 				}
-				this.scrollIntoView = 'item' + index;
+
 				if (index == this.innerCurrent) return;
 				this.$nextTick(function(){
 					this.innerCurrent = index;
@@ -216,6 +225,7 @@
 			},
 			// 右边菜单滚动
 			async rightScroll(e) {
+				if (this.mode !== 'follow') return;
 				this.oldScrollTop = e.detail.scrollTop;
                 // console.log(e.detail.scrollTop)
                 // console.log(JSON.stringify(this.arr))
@@ -261,6 +271,7 @@
 	.u-cate-tab__wrap {
 		flex: 1;
 		display: flex;
+		flex-direction: row;
 		overflow: hidden;
 	}
 

package/components/u-choose/u-choose.vue

@@ -0,0 +1,109 @@
+<style scoped lang="scss">
+	.up-choose {
+		::v-deep .up-tag {
+		    font-weight: 600;
+		}
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+	
+	.up-choose-wrap {
+		flex-wrap: wrap;
+	}
+	
+	.up-choose-nowrap {
+		flex-wrap: nowrap;
+		white-space: nowrap;
+	}
+</style>
+
+<template>
+	<scroll-view 
+		:scroll-x="wrap === false" 
+		:class="['up-choose', wrap ? 'up-choose-wrap' : 'up-choose-nowrap']">
+        <template :key="item.id"  v-for="(item,index) in options">
+            <view :style="{width: width, display: 'inline-block'}">
+                <slot :item="item" :index="index">
+                    <up-tag :type="index == currentIndex ? 'primary' : 'info'"
+                        size="large" :plain="index == currentIndex ? false : true"
+                        :class="currentIndex === index ? 'active': ''" :height="itemHeight"
+                        :style="{width: itemWidth, padding: itemPadding}"
+                        @click="change(index)">
+                        {{item[labelName]}}
+                    </up-tag>
+                </slot>
+            </view>
+        </template>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+	    name: 'up-choose',
+	    props: {
+			options:{
+				type: Array,
+				default: ()=>{
+					return [];
+				}
+			},
+			modelValue: {
+				type: [Number,String,Array],
+				default: false
+			},
+			type: {
+			    type: [String],
+			    default: 'radio'
+			},
+			itemWidth: {
+			    type: [String],
+			    default: 'auto'
+			},
+			itemHeight: {
+			    type: [String],
+			    default: '50px'
+			},
+            itemPadding: {
+                type: [String],
+			    default: '8px'
+            },
+			labelName: {
+			    type: String,
+			    default: 'title'
+			},
+			valueName: {
+			    type: String,
+			    default: 'value'
+			},
+			customClick: {
+			    type: Boolean,
+			    default: false
+			},
+			// 是否换行
+			wrap: {
+				type: Boolean,
+				default: true
+			}
+	    },
+	    data() {
+	        return {
+				currentIndex: ''
+	        }
+	    },
+	    created: function () {
+			this.currentIndex = this.modelValue;
+	    },
+        emits: ['update:modelValue', 'custom-click'],
+	    methods: {
+	        change(index){
+				if (this.customClick) {
+					this.$emit('custom-click', index);
+				} else {
+					this.currentIndex = index;
+					this.$emit('update:modelValue', index);
+				}
+			}
+	    }
+	}
+</script>

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

@@ -39,7 +39,8 @@
 				<view class="u-steps-item__content__title">
 					<slot name="title">
 					</slot>
-					<up-text v-if="!$slots['title']" :text="title" :type="parentData.current == index ? 'main' : 'content'" lineHeight="20px"
+					<up-text v-if="!$slots['title']" :text="title" lineHeight="20px"
+						:type="parentData.current == index ? 'main' : 'content'"
 						:size="parentData.current == index ? 14 : 13"></up-text>
 				</view>
 				<view class="u-steps-item__content__desc">
@@ -313,6 +314,12 @@
 			@include flex;
 			flex: 1;
 
+			&__title {
+				// #ifdef H5
+				cursor: pointer;
+				// #endif
+			}
+
 			&--row {
 				flex-direction: column;
 				align-items: center;

package/package.json

@@ -2,8 +2,8 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.5.28",
-  "description": "零云®uview-plus已兼容vue3支持多语言，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
+  "version": "3.5.39",
+  "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",
     "uview-plus",
@@ -49,7 +49,7 @@
       "cloud": {
         "tcb": "√",
         "aliyun": "√",
-        "alipay": "x"
+        "alipay": "√"
       },
       "client": {
         "uni-app": {