uview-plus 3.3.41 → 3.3.43

package/changelog.md

@@ -1,9 +1,18 @@
+## 3.3.43（2024-11-18）
+fix: 支持瀑布流组件v-model置为[]
+
+add: 新增字符串路径访问工具方法getValueByPath
+
+add: 新增float-button悬浮按钮组件
+
+## 3.3.42（2024-11-15）
+add: button组件支持stop参数阻止冒泡
+
 ## 3.3.41（2024-11-13）
 fix: u-radio-group invalid import
 
 improvement: 优化图片组件宽高及修复事件event传递
 
-
 ## 3.3.40（2024-11-11）
 add: 组件radioGroup增加gap属性用于设置item间隔 
 

package/components/u-button/button.js

@@ -37,6 +37,7 @@ export default {
         text: '',
         icon: '',
         iconColor: '',
-        color: ''
+        color: '',
+        stop: true,
     }
 }

package/components/u-button/props.js

@@ -149,6 +149,11 @@ export const props = defineMixin({
         color: {
             type: String,
             default: () => defProps.button.color
-        }
+        },
+        // 停止冒泡
+        stop: {
+            type: Boolean,
+            default: () => defProps.button.stop
+        },
     }
 })

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

@@ -271,7 +271,7 @@ export default {
 		'error', 'opensetting', 'launchapp', 'agreeprivacyauthorization'],
     methods: {
         addStyle,
-        clickHandler() {
+        clickHandler(e: any) {
             // 非禁止并且非加载中，才能点击
             if (!this.disabled && !this.loading) {
 				// 进行节流控制，每this.throttle毫秒内，只在开始处执行
@@ -279,6 +279,8 @@ export default {
 					this.$emit("click");
 				}, this.throttleTime);
             }
+            // 是否阻止事件传播
+            this.stop && this.preventEvent(e)
         },
         // 下面为对接uniapp官方按钮开放能力事件回调的对接
         getphonenumber(res: any) {

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

@@ -0,0 +1,167 @@
+<template>
+    <view
+        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',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: width,
+            height: height,
+            borderRadius: '50%',
+            borderColor: borderColor,
+        }">
+            <slot :showList="showList">
+                <up-icon class="cursor-pointer" :class="{'show-list': showList}" name="plus" :color="color"></up-icon>
+            </slot>
+            <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?.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 ? item?.borderColor :  borderColor,
+                        }" @click="itemClick(item, index)">
+                            <up-icon :name="item.name" :color="item?.color ? item?.color : color"></up-icon>
+                        </view>
+                    </template>
+                </slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+/**
+ * FloatButton 悬浮按钮
+ * @description 悬浮按钮常用于屏幕右下角点击展开的操作菜单
+ * @tutorial https://ijry.github.io/uview-plus/components/floatButton.html
+ * @property {String}                backgroundColor      背景颜色
+ * @event {Function} click  点击触发事件
+ * @example <up-float-button></up-float-button>
+ */
+export default {
+    name: 'u-float-button',
+    // #ifdef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+    // #ifndef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+   emits: ['click', 'item-click'],
+    computed: {
+    },
+    props: {
+        // 背景颜色
+        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 {
+            showList: false
+        }
+    },
+    methods: {
+        addStyle,
+        clickHandler(e) {
+            if (this.isMenu) {
+                this.showList = !this.showList
+                this.$emit('click', e)
+            } else {
+                this.$emit('click', e)
+            }
+        },
+        itemClick(item, index) {
+            this.$emit('item-click', {
+                ...item,
+                index
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+
+.u-float-button {
+    z-index: 999;
+    .show-list {
+        transform: rotate(45deg);
+    }
+    &__list {
+        position: absolute;
+        bottom: 0px;
+        display: flex;
+        flex-direction: column;
+        >view {
+            margin: 5px 0px;
+        }
+    }
+}
+</style>

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]"
 		>

package/components/u-slider/u-slider.vue

@@ -274,7 +274,7 @@
 				// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
 				if (this.status == 'start') this.$emit('start');
 				let touches = event.touches[0];
-				console.log('touchs', touches)
+				// console.log('touchs', touches)
 				// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
 				let clientX = 0;
 				// #ifndef APP-NVUE

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