uview-plus 3.4.46 → 3.4.48

package/README.md

@@ -12,7 +12,7 @@
 
 ## 说明
 
-uview-plus，是uni-app全面兼容vue3/nvue/鸿蒙/uni-app-x的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。uview-plus是基于uView2.x移植的支持vue3的版本，感谢uView。
+uview-plus，是uni-app全面兼容vue3/nvue/鸿蒙/uni-app-x(即将发布)的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。uview-plus是基于uView2.x移植的支持vue3的版本，感谢uView。
 
 ## 可视化设计
 

package/changelog.md

@@ -1,3 +1,19 @@
+## 3.4.48（2025-07-10）
+fix: 官方文档Card示例组件多行显示省略号样式异常
+
+feat: album组件支持自定义preview事件
+
+## 3.4.47（2025-07-09）
+fix: 修复datetime-picker打开时，数值可能出现对不上的问题
+
+feat: Subsection 分段器添加支持从 list中读取激活文字颜色和未激活文字颜色
+
+fix: 修复modal定义confirmButton
+
+fix: safe-bottom底部安全距离在小程序优先用JS计算
+
+feat: 新增tree树形组件
+
 ## 3.4.46（2025-07-08）
 feat: 上传组件预览视频支持videoPreviewObjectFit参数
 

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

@@ -13,7 +13,7 @@
                 v-for="(item, index1) in arr"
                 :key="index1"
                 :style="[imageStyle(index + 1, index1 + 1)]"
-                @tap="previewFullImage ? onPreviewTap($event, getSrc(item)) : ''"
+                @tap="onPreviewTap($event, getSrc(item))"
             >
                 <image
                     :src="getSrc(item)"
@@ -185,6 +185,7 @@ export default {
             return width
         }
     },
+    emits: ['preview', 'albumWidth'],
     methods: {
         addUnit,
         // 预览图片
@@ -192,12 +193,19 @@ export default {
             const urls = this.urls.map((item) => {
                 return this.getSrc(item)
             })
-            uni.previewImage({
-                current: url,
-                urls
-            })
-            // 是否阻止事件传播
-			this.stop && this.preventEvent(e)
+            if (this.previewFullImage) {
+                uni.previewImage({
+                    current: url,
+                    urls
+                })
+                // 是否阻止事件传播
+                this.stop && this.preventEvent(e)
+            } else {
+                this.$emit('preview', {
+                    urls,
+                    currentIndex: urls.indexOf(url)
+                })
+            }
         },
         // 获取图片的路径
         getSrc(item) {

package/components/u-datetime-picker/u-datetime-picker.vue

@@ -109,6 +109,12 @@
 		watch: {
 			show(newValue, oldValue) {
 				if (newValue) {
+					// #ifdef VUE3
+					this.innerValue = this.correctValue(this.modelValue)
+					// #endif
+					// #ifdef VUE2
+					this.innerValue = this.correctValue(this.value)
+					// #endif
 					this.updateColumnValue(this.innerValue)
 				}
 			},

package/components/u-icon/u-icon.vue

@@ -95,7 +95,7 @@
 					// console.log('内置字体图标加载成功');
 				},
 				fail() {
-					console.error('内置字体图标加载出错');
+					// console.error('内置字体图标加载出错');
 				}
 			});
 			if (config.customIcon.family) {
@@ -106,7 +106,7 @@
 						// console.log('扩展字体图标加载成功');
 					},
 					fail() {
-						console.error('扩展字体图标加载出错');
+						// console.error('扩展字体图标加载出错');
 					}
 				});
 			}

package/components/u-safe-bottom/u-safe-bottom.vue

@@ -34,7 +34,7 @@
 		computed: {
 			style() {
 				const style = {};
-				// #ifdef APP-NVUE || MP-TOUTIAO
+				// #ifdef APP-NVUE || MP
 				// nvue下，高度使用js计算填充
 				style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
 				// #endif

package/components/u-subsection/props.js

@@ -1,5 +1,6 @@
-import { defineMixin } from '../../libs/vue'
+import {defineMixin} from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
+
 export const props = defineMixin({
     props: {
         // tab的数据
@@ -42,10 +43,20 @@ export const props = defineMixin({
             type: String,
             default: () => defProps.subsection.bgColor
         },
-		// 从list元素对象中读取的键名
-		keyName: {
-			type: String,
-			default: () => defProps.subsection.keyName
-		}
+        // 从list元素对象中读取的键名
+        keyName: {
+            type: String,
+            default: () => defProps.subsection.keyName
+        },
+        // 从`list`元素对象中读取激活时的颜色  如果存在字段 优先级大于 activeColor
+        activeColorKeyName: {
+            type: String,
+            default: () => defProps.subsection.activeColorKeyName
+        },
+        // 从`list`元素对象中读取未激活时的颜色 如果存在字段 优先级大于 inactiveColor
+        inactiveColorKeyName: {
+            type: String,
+            default: () => defProps.subsection.inactiveColorKeyName
+        }
     }
 })

package/components/u-subsection/subsection.js

@@ -18,6 +18,8 @@ export default {
         fontSize: 12,
         bold: true,
         bgColor: '#eeeeef',
-		keyName: 'name'
+        keyName: 'name',
+        activeColorKeyName: 'activeColorKey',
+        inactiveColorKeyName: 'inactiveColorKey',
     }
 }

package/components/u-subsection/u-subsection.vue

@@ -40,7 +40,7 @@
         >
             <text
                 class="u-subsection__item__text"
-                :style="[textStyle(index)]"
+                :style="[textStyle(index,item)]"
                 >{{ getText(item) }}</text
             >
         </view>
@@ -158,22 +158,46 @@ export default {
             };
         },
         // 分段器文字颜色
-        textStyle(index) {
-            return (index) => {
+        textStyle(index,item) {
+            return (index,item) => {
                 const style = {};
                 style.fontWeight =
                     this.bold && this.innerCurrent === index ? "bold" : "normal";
                 style.fontSize = addUnit(this.fontSize);
+
+                let activeColorTemp = null;
+                let inactiveColorTemp = null;
+                // 如果是对象并且设置了对应的背景色字段 则优先使用设置的字段
+                if(typeof item === 'object' && item[this.activeColorKeyName]){
+                    activeColorTemp = item[this.activeColorKeyName];
+                }
+                if(typeof item === 'object' && item[this.inactiveColorKeyName]){
+                    inactiveColorTemp = item[this.inactiveColorKeyName];
+                }
+
                 // subsection模式下，激活时默认为白色的文字
                 if (this.mode === "subsection") {
-                    style.color =
-                        this.innerCurrent === index ? "#fff" : this.inactiveColor;
-                } else {
+                    // 判断当前是否激活
+                    if(this.innerCurrent === index){
+                        // 判断当前是否有自定义的颜色
+                        style.color = activeColorTemp ? activeColorTemp : '#FFF'
+                        // style.color = activeColorTemp ? activeColorTemp : this.activeColor
+                    }
+                    else{
+                        // 判断当前是否有自定义的颜色
+                        style.color = inactiveColorTemp ? inactiveColorTemp : this.inactiveColor;
+                    }
+                }
+                else {
                     // button模式下，激活时文字颜色默认为activeColor
-                    style.color =
-                        this.innerCurrent === index
-                            ? this.activeColor
-                            : this.inactiveColor;
+                    if(this.innerCurrent === index){
+                        // 判断当前是否有自定义的颜色
+                        style.color = activeColorTemp ? activeColorTemp : this.activeColor
+                    }
+                    else{
+                        // 判断当前是否有自定义的颜色
+                        style.color = inactiveColorTemp ? inactiveColorTemp : this.inactiveColor;
+                    }
                 }
                 return style;
             };

package/components/u-tree/tree-node.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="u-tree-node" :style="{ paddingLeft: depth * 20 + 'px' }">
+    <view class="u-tree-node-content" @click="toggle">
+      <!-- <text v-if="hasChildren" class="u-tree-node-toggle">
+        {{ node.expanded ? '▼' : '▶' }}
+      </text> -->
+      <up-icon v-if="hasChildren" class="u-tree-node-toggle"
+       :name="node.expanded ? 'arrow-down-fill' : 'play-right-fill'" size="12" />
+      <up-checkbox
+        v-if="showCheckbox"
+        usedAlone
+        :size="12"
+        :checked="node.checked"
+        @change="toggleCheck"
+        style="margin-right: 10px;"
+      />
+      <slot :nodeData="node" :level="depth + 1">
+        {{ node[props.label] }}
+      </slot>
+    </view>
+    <view v-if="hasChildren && (node.expanded === undefined ? true : node.expanded)"
+      class="u-tree-node-children"
+      :style="{ paddingLeft: (depth + 1) * 20 + 'px' }">
+      <tree-node
+        v-for="child in node[props.children]"
+        :key="child[props.nodeKey]"
+        :node="child"
+        :props="props"
+        :show-checkbox="showCheckbox"
+        :check-strictly="checkStrictly"
+        :expand-on-click-node="expandOnClickNode"
+        :depth="depth + 1"
+        @node-click="$emit('node-click', $event)"
+        @check-change="$emit('check-change', $event)">
+        <template #default="{ nodeData, level }">
+            <slot name="default" :nodeData="nodeData" :level="level"></slot>
+        </template>
+      </tree-node>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tree-node',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    props: {
+      type: Object,
+      required: true
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    depth: {
+        type: Number,
+        default: 0
+    }
+  },
+  computed: {
+    hasChildren() {
+      return this.node[this.props.children] && this.node[this.props.children].length > 0;
+    },
+    isExpanded() {
+        return this.node.expanded === undefined ? false : this.node.expanded;
+    }
+  },
+  emits: ['node-click', 'check-change'],
+  methods: {
+    toggle() {
+      if (this.expandOnClickNode && this.hasChildren) {
+        this.node.expanded = !this.node.expanded;
+      }
+      this.$emit('node-click', this.node);
+    },
+    toggleCheck(checked) {
+      this.node.checked = checked;
+      if (!this.checkStrictly) {
+        this.updateChildCheckStatus(this.node, checked);
+        this.updateParentCheckStatus(this.node);
+      }
+      this.$emit('check-change', this.node);
+    },
+    updateChildCheckStatus(node, checked) {
+      if (node[this.props.children]) {
+        node[this.props.children].forEach(child => {
+          child.checked = checked;
+          this.updateChildCheckStatus(child, checked);
+        });
+      }
+    },
+    updateParentCheckStatus(node) {
+      let parent = this.$parent;
+      while (parent && parent.node) {
+        const allChecked = parent.node[this.props.children].every(
+          child => child.checked
+        );
+        parent.node.checked = allChecked;
+        parent = parent.$parent;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.u-tree-node-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 20px;
+}
+.u-tree-node-toggle {
+  margin-right: 5px;
+}
+</style>

package/components/u-tree/u-tree.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="u-tree">
+    <tree-node
+      v-for="node in treeData"
+      :key="node[props.nodeKey]"
+      :node="node"
+      :props="props"
+      :show-checkbox="showCheckbox"
+      :check-strictly="checkStrictly"
+      :expand-on-click-node="expandOnClickNode"
+      @node-click="handleNodeClick"
+      @check-change="$emit('check-change', $event)">
+      <template #default="{ nodeData, level }">
+        <slot :node="nodeData" :level="level"></slot>
+      </template>
+    </tree-node>
+  </view>
+</template>
+
+<script>
+import TreeNode from './tree-node.vue';
+
+export default {
+  name: 'u-tree',
+  components: { TreeNode },
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        label: 'label',
+        children: 'children',
+        nodeKey: 'id'
+      })
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      treeData: []
+    };
+  },
+  created() {
+    this.initTree();
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.treeData = JSON.parse(JSON.stringify(newVal));
+        this.initExpandedState(this.treeData, this.defaultExpandAll);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  emits: ['node-click', 'check-change'],
+  methods: {
+    initTree() {
+      this.treeData = JSON.parse(JSON.stringify(this.data));
+      this.initExpandedState(this.treeData, this.defaultExpandAll);
+    },
+    initExpandedState(nodes, expanded) {
+      nodes.forEach(node => {
+        node.expanded = expanded;
+        if (node[this.props.children]) {
+          this.initExpandedState(node[this.props.children], expanded);
+        }
+      });
+    },
+    handleNodeClick(node) {
+      this.$emit('node-click', node);
+    },
+    /**
+     * 直接递归 treeData 获取所有 checked 的节点
+     */
+    getCheckedNodes() {
+        const traverse = (nodes) => {
+            let result = [];
+            nodes.forEach(node => {
+            if (node.checked) {
+                result.push(node);
+            }
+            if (node[this.props.children] && node[this.props.children].length > 0) {
+                result = result.concat(traverse(node[this.props.children]));
+            }
+            });
+            return result;
+        };
+        return traverse(this.treeData);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.u-tree {
+  font-size: 28rpx;
+}
+</style>

package/package.json

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

package/types/comps/modal.d.ts

@@ -100,7 +100,7 @@ declare interface ModalSlots {
   /**
    * 传入自定义按钮，用于在微信小程序弹窗通过按钮授权的场景
    */
-  ['confirm-button']?: () => any
+  ['confirmButton']?: () => any
 }
 
 declare interface _Modal {

package/types/comps/subsection.d.ts

@@ -46,6 +46,17 @@ declare interface SubsectionProps {
    * @default "name"
    */
   keyName?: string
+
+  /**
+   * 从`list`元素对象中读取激活时的颜色  如果存在字段 优先级大于 activeColor
+   * @default activeColorKey
+   */
+  activeColorKeyName?: string
+  /**
+   * 从`list`元素对象中读取未激活时的颜色 如果存在字段 优先级大于 inactiveColor
+   * @default inactiveColorKey
+   */
+  inactiveColorKeyName?: string
   /**
    * 分段器选项发生改变时触发
    * @param index 选项的index索引值，从0开始