uview-plus 3.3.40 → 3.3.42

package/changelog.md

@@ -1,3 +1,11 @@
+## 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,122 @@
+<template>
+    <view
+        class="u-float-button" :class="class">
+        <view class="u-float-button__main" @click.stop="clickHandler" :style="{
+            backgroundColor: backgroundColor,
+            color: color,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            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>
+            </slot>
+            <slot name="list">
+                <view class="u-float-button__list" :style="{
+                    bottom: bottom,
+                    right: right
+                }">
+                    <template v-for="item in list">
+                        <view class="u-float-button__item" :style="{
+                            backgroundColor: item?.bgColor || bgColor,
+                            color: item?.color || color,
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            width: width,
+                            height: height,
+                            borderRadius: '50%',
+                            borderColor: item?.borderColor || borderColor,
+                        }" @click="itemClick(item, index)">
+                            <up-icon :name="item.name" :color="item?.color || color"></up-icon>
+                        </view>
+                    </template>
+                </view>
+            </slot>
+        </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}                bgColor      背景颜色
+ * @event {Function} click  点击触发事件
+ * @example <up-view></up-view>
+ */
+export default {
+    name: 'u-float-button',
+    // #ifdef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+    // #ifndef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+   emits: ['click', 'item-click'],
+    computed: {
+        valueStyle() {}
+    },
+    props: {
+        bgColor: '#2979ff',
+        color: '#fff',
+        width: '50px',
+        height: '50px',
+        borderColor: '',
+        right: '80px',
+        bottom: '100px',
+        isMenu: false
+    },
+    data() {
+        return {
+            showList: false
+        }
+    },
+    methods: {
+        addStyle,
+        clickHandler(e) {
+            if (this.isMenu) {
+                this.showList = !this.showList
+            } 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 {
+    .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

@@ -2,6 +2,7 @@
 	<u-transition
 		mode="fade"
 		:show="show"
+		:style="transStyle"
 		:duration="fade ? 1000 : 0"
 	>
 		<view
@@ -129,6 +130,13 @@
 			}
 		},
 		computed: {
+			transStyle() {
+				let style = {};
+				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+				style.width = addUnit(this.width);
+				style.height = addUnit(this.height);
+				return style;
+			},
 			wrapStyle() {
 				let style = {};
 				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
@@ -156,8 +164,8 @@
 		methods: {
 			addUnit,
 			// 点击图片
-			onClick() {
-				this.$emit('click')
+			onClick(e) {
+				this.$emit('click', e)
 			},
 			// 图片加载失败
 			onErrorHandler(err) {
@@ -192,7 +200,7 @@
 			removeBgColor() {
 				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
 				this.backgroundStyle = {
-					backgroundColor: 'transparent'
+					backgroundColor: this.bgColor || '#ffffff'
 				};
 			}
 		}

package/components/u-radio-group/u-radio-group.vue

@@ -2,7 +2,7 @@
 	<view
 	    class="u-radio-group"
 	    :class="bemClass"
-		:style="radioGroupStyle"
+			:style="radioGroupStyle"
 	>
 		<slot></slot>
 	</view>
@@ -12,6 +12,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
 
 	/**
 	 * radioRroup 单选框父组件
@@ -34,7 +35,7 @@
 	 * @property {Boolean}						borderBottom	placement为row时，是否显示下边框 （默认 false ）
 	 * @property {String}						iconPlacement	图标与文字的对齐方式 （默认 'left' ）
 	 * @property {Object}						gap				item 之间的间距
-     * @property {Object}						customStyle		组件的样式，对象形式
+   * @property {Object}						customStyle		组件的样式，对象形式
 	 * @event {Function} change 任一个radio状态发生变化时触发
 	 * @example <u-radio-group v-model="value"></u-radio-group>
 	 */

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-view/u-view.vue

@@ -0,0 +1,73 @@
+<template>
+    <view
+        class="u-view" :class="class" :style="{
+            backgroundColor: backgroundColor,
+            color: color,
+            flexDirection: flexDirection,
+            justifyContent: justifyContent,
+            alignItems: alignItems,
+            flex1: flex1,
+            width: width,
+            height: height,
+            padding: padding,
+            margin: margin,
+            borderColor: borderColor,
+        }">
+    </view>
+</template>
+
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+/**
+ * View 视图
+ * @description 对View默认标签的封装
+ * @tutorial https://ijry.github.io/uview-plus/components/view.html
+ * @property {String} 					bgColor		背景颜色
+ * @event {Function} click  点击触发事件
+ * @example <up-view></up-view>
+ */
+export default {
+    name: 'up-view',
+    // #ifdef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+    // #ifndef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+	emits: ['click'],
+    computed: {
+        valueStyle() {}
+    },
+    props: {
+        backgroundColor: '',
+        color: '',
+        flexDirection: '',
+        justifyContent: '',
+        alignItems: '',
+        flex1: '',
+        width: '',
+        height: '',
+        padding: '',
+        margin: '',
+        borderColor: ''
+    },
+    data() {
+        return {}
+    },
+    methods: {
+        addStyle,
+        clickHandler() {
+            this.$emit('click')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+
+.u-view {
+}
+</style>

package/package.json

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