uview-plus 3.3.42 → 3.3.45

package/changelog.md

@@ -1,3 +1,10 @@
+## 3.3.43（2024-11-18）
+fix: 支持瀑布流组件v-model置为[]
+
+add: 新增字符串路径访问工具方法getValueByPath
+
+add: 新增float-button悬浮按钮组件
+
 ## 3.3.42（2024-11-15）
 add: button组件支持stop参数阻止冒泡
 

package/components/u-button/u-button.vue

@@ -276,7 +276,7 @@ export default {
             if (!this.disabled && !this.loading) {
 				// 进行节流控制，每this.throttle毫秒内，只在开始处执行
 				throttle(() => {
-					this.$emit("click");
+					this.$emit("click", e);
 				}, this.throttleTime);
             }
             // 是否阻止事件传播

package/components/u-button/vue.scss

@@ -12,7 +12,7 @@ $u-button-icon-margin-left:4px !default;
 $u-button-plain-u-button-info-color:$u-info;
 $u-button-plain-u-button-success-color:$u-success;
 $u-button-plain-u-button-error-color:$u-error;
-$u-button-plain-u-button-warning-color:$u-error;
+$u-button-plain-u-button-warning-color:$u-warning;
 
 .u-button {
 	width: 100%;

package/components/u-float-button/u-float-button.vue

@@ -1,7 +1,12 @@
 <template>
     <view
-        class="u-float-button" :class="class">
-        <view class="u-float-button__main" @click.stop="clickHandler" :style="{
+        class="u-float-button" :style="{
+            position: 'fixed',
+            top: top,
+            bottom: bottom,
+            right: right,
+        }">
+        <view class="u-float-button__main" @click="clickHandler" :style="{
             backgroundColor: backgroundColor,
             color: color,
             flexDirection: 'row',
@@ -9,37 +14,33 @@
             alignItems: 'center',
             width: width,
             height: height,
-            position: 'absolute',
-            bottom: bottom,
-            right: right,
             borderRadius: '50%',
             borderColor: borderColor,
         }">
             <slot :showList="showList">
-                <up-icon :class="{'show-list': showList}" name="plus" :color="color"></up-icon>
+                <up-icon class="cursor-pointer" :class="{'show-list': showList}" name="plus" :color="color"></up-icon>
             </slot>
-            <slot name="list">
-                <view class="u-float-button__list" :style="{
-                    bottom: bottom,
-                    right: right
-                }">
+            <view v-if="showList" class="u-float-button__list" :style="{
+                bottom: height
+            }">
+                <slot name="list">
                     <template v-for="item in list">
                         <view class="u-float-button__item" :style="{
-                            backgroundColor: item?.bgColor || bgColor,
-                            color: item?.color || color,
+                            backgroundColor: item?.backgroundColor ? item?.backgroundColor : backgroundColor,
+                            color: item?.color ? item?.color : color,
                             flexDirection: 'row',
                             justifyContent: 'center',
                             alignItems: 'center',
                             width: width,
                             height: height,
                             borderRadius: '50%',
-                            borderColor: item?.borderColor || borderColor,
+                            borderColor: item?.borderColor ? item?.borderColor :  borderColor,
                         }" @click="itemClick(item, index)">
-                            <up-icon :name="item.name" :color="item?.color || color"></up-icon>
+                            <up-icon :name="item.name" :color="item?.color ? item?.color : color"></up-icon>
                         </view>
                     </template>
-                </view>
-            </slot>
+                </slot>
+            </view>
         </view>
     </view>
 </template>
@@ -52,9 +53,9 @@ import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
  * FloatButton 悬浮按钮
  * @description 悬浮按钮常用于屏幕右下角点击展开的操作菜单
  * @tutorial https://ijry.github.io/uview-plus/components/floatButton.html
- * @property {String}                bgColor      背景颜色
+ * @property {String}                backgroundColor      背景颜色
  * @event {Function} click  点击触发事件
- * @example <up-view></up-view>
+ * @example <up-float-button></up-float-button>
  */
 export default {
     name: 'u-float-button',
@@ -66,17 +67,59 @@ export default {
     // #endif
    emits: ['click', 'item-click'],
     computed: {
-        valueStyle() {}
     },
     props: {
-        bgColor: '#2979ff',
-        color: '#fff',
-        width: '50px',
-        height: '50px',
-        borderColor: '',
-        right: '80px',
-        bottom: '100px',
-        isMenu: false
+        // 背景颜色
+        backgroundColor: {
+            type: String,
+            default: '#2979ff'
+        },
+        // 文字颜色
+        color: {
+            type: String,
+            default: '#fff'
+        },
+        // 宽度
+        width: {
+            type: String,
+            default: '50px'
+        },
+        // 高度
+        height: {
+            type: String,
+            default: '50px'
+        },
+        // 边框颜色，默认为空字符串表示无边框
+        borderColor: {
+            type: String,
+            default: ''
+        },
+        // 右侧偏移量
+        right: {
+            type: [String, Number],
+            default: '30px'
+        },
+        // 顶部偏移量，未提供默认值，可能需要根据具体情况设置
+        top: {
+            type: [String, Number],
+            default: '',
+        },
+        // 底部偏移量
+        bottom: {
+            type: String,
+            default: ''
+        },
+        // 是否为菜单项
+        isMenu: {
+            type: Boolean,
+            default: false
+        },
+        list: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
     },
     data() {
         return {
@@ -88,6 +131,7 @@ export default {
         clickHandler(e) {
             if (this.isMenu) {
                 this.showList = !this.showList
+                this.$emit('click', e)
             } else {
                 this.$emit('click', e)
             }
@@ -106,6 +150,7 @@ export default {
 @import '../../libs/css/components.scss';
 
 .u-float-button {
+    z-index: 999;
     .show-list {
         transform: rotate(45deg);
     }

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

@@ -6,7 +6,7 @@
 		:duration="fade ? 1000 : 0"
 	>
 		<view
-			class="u-image"
+			class="u-image box-border"
 			@tap="onClick"
 			:style="[wrapStyle, backgroundStyle]"
 		>
@@ -20,9 +20,7 @@
 				:lazy-load="lazyLoad"
 				class="u-image__image"
 				:style="{
-					borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
-					width: addUnit(width),
-					height: addUnit(height)
+					borderRadius: shape == 'circle' ? '10000px' : addUnit(radius)
 				}"
 			></image>
 			<view
@@ -38,8 +36,6 @@
 				<slot name="loading">
 					<u-icon
 						:name="loadingIcon"
-						:width="width"
-						:height="height"
 					></u-icon>
 				</slot>
 			</view>
@@ -47,16 +43,12 @@
 				v-if="showError && isError && !loading"
 				class="u-image__error"
 				:style="{
-					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
-					width: addUnit(width),
-					height: addUnit(height)
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius)
 				}"
 			>
 				<slot name="error">
 					<u-icon
 						:name="errorIcon"
-						:width="width"
-						:height="height"
 					></u-icon>
 				</slot>
 			</view>
@@ -140,8 +132,10 @@
 			wrapStyle() {
 				let style = {};
 				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
-				style.width = addUnit(this.width);
-				style.height = addUnit(this.height);
+				// style.width = addUnit(this.width);
+				// style.height = addUnit(this.height);
+				style.width = '100%';
+				style.height = '100%';
 				// 如果是显示圆形，设置一个很多的半径值即可
 				style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius)
 				// 如果设置圆角，必须要有hidden，否则可能圆角无效

package/components/u-navbar/navbar.js

@@ -20,6 +20,7 @@ export default {
         rightText: '',
         rightIcon: '',
         title: '',
+        titleColor: '',
         bgColor: '#ffffff',
         titleWidth: '400rpx',
         height: '44px',

package/components/u-navbar/props.js

@@ -48,6 +48,11 @@ export const props = defineMixin({
 			type: [String, Number],
 			default: () => defProps.navbar.title
 		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: () => defProps.navbar.titleColor
+		},
 		// 背景颜色
 		bgColor: {
 			type: String,

package/components/u-navbar/u-navbar.vue

@@ -47,6 +47,7 @@
 						class="u-line-1 u-navbar__content__title"
 						:style="[{
 							width: addUnit(titleWidth),
+							color: titleColor,
 						}, addStyle(titleStyle)]"
 					>{{ title }}</text>
 				</slot>
@@ -85,11 +86,12 @@
 	 * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
 	 * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
 	 * @property {Boolean}			border				导航栏底部是否显示下边框 （默认 false ）
-	 * @property {String}			leftIcon			左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
+	 * @property {String}			leftIcon			左边返回图标的名称，只能为uview-pls自带的图标 （默认 'arrow-left' ）
 	 * @property {String}			leftText			左边的提示文字
 	 * @property {String}			rightText			右边的提示文字
-	 * @property {String}			rightIcon			右边返回图标的名称，只能为uView自带的图标
+	 * @property {String}			rightIcon			右边返回图标的名称，只能为uview-plus自带的图标
 	 * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
+	 * @property {String}			titleColor			文字颜色 （默认 '' ）
 	 * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
 	 * @property {String | Number}	titleWidth			导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
 	 * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）

package/components/u-waterfall/u-waterfall.vue

@@ -67,11 +67,16 @@
         },
         watch: {
             copyFlowList(nVal, oVal) {
-                // 取差值，即这一次数组变化新增的部分
-                let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
-                // 拼接上原有数据
-                this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
-                this.splitData();
+                if (!nVal || nVal.length == 0) {
+                    this.clear();
+                    // console.log('clear');
+                } else {
+                    // 取差值，即这一次数组变化新增的部分
+                    let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
+                    // 拼接上原有数据
+                    this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
+                    this.splitData();
+                }
             }
         },
         mounted() {
@@ -81,12 +86,18 @@
         computed: {
             // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
             copyFlowList() {
+                // #ifdef VUE3
+                if (!this.modelValue || this.modelValue.length == 0) {
+                    this.clear();
+                    // console.log('clear');
+                    return [];
+                } else {
+                    return this.cloneData(this.modelValue);
+                }
+                // #endif
                 // #ifdef VUE2
                 return this.cloneData(this.value);
                 // #endif
-                // #ifdef VUE3
-                return this.cloneData(this.modelValue);
-                // #endif
             }
         },
         emits: ['update:modelValue'],

package/libs/function/index.js

@@ -694,6 +694,17 @@ export function pages() {
 	return pages
 }
 
+export function getValueByPath(obj, path) {
+    // 将路径字符串按 '.' 分割成数组
+    const pathArr = path.split('.');
+    // 使用 reduce 方法从 obj 开始，逐级访问嵌套属性
+    return pathArr.reduce((acc, curr) => {
+        // 如果当前累加器（acc）是对象且包含当前键（curr），则返回该键对应的值
+        // 否则返回 undefined（表示路径不存在）
+        return acc && acc[curr] !== undefined ? acc[curr] : undefined;
+    }, obj);
+}
+
 export default {
 	range,
 	getPx,
@@ -724,5 +735,6 @@ export default {
 	setProperty,
 	page,
 	pages,
+	getValueByPath,
 	// setConfig
 }

package/package.json

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

package/types/comps.d.ts

@@ -1,4 +1,4 @@
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     // 基础组件
     ['up-icon']: typeof import('./comps/icon')['Icon']