uview-plus 3.3.7 → 3.3.8

package/changelog.md

@@ -1,3 +1,16 @@
+## 3.3.8（2024-07-31）
+feat: slider支持进度条任意位置触发按钮拖动
+
+fix: 修复app-vue下modal标题不居中
+
+fix: #459 TS setConfig 声明异常
+
+feat: tabs组件增加longPress长按事件
+
+feat: 新增showRight属性控制collapse右侧图标显隐
+
+fix: 优化nvue下css警告
+
 ## 3.3.7（2024-07-29）
 feat: 支持IndexList组件支持在弹窗等场景下使用及联动优化
 

package/components/u-checkbox/u-checkbox.vue

@@ -91,7 +91,7 @@
 			}
 		},
 		computed: {
-			// 是否禁用，如果父组件u-raios-group禁用的话，将会忽略子组件的配置
+			// 是否禁用，如果父组件u-radios-group禁用的话，将会忽略子组件的配置
 			elDisabled() {
 				return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
 			},

package/components/u-collapse-item/props.js

@@ -56,6 +56,11 @@ export const props = defineMixin({
         duration: {
             type: Number,
             default: () => defProps.collapseItem.duration
-        }
+        },
+        // 显示右侧图标
+        showRight: {
+            type: Boolean,
+            default: () => defProps.collapseItem.showRight
+        },
     }
 })

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

@@ -33,9 +33,11 @@
 				</slot>
 			</template>
 			<template #right-icon>
-				<u-icon v-if="!$slots['right-icon']" :size="16" name="arrow-right"></u-icon>
-				<slot name="right-icon">
-				</slot>
+				<template v-if="showRight">
+					<u-icon v-if="!$slots['right-icon']" :size="16" name="arrow-right"></u-icon>
+					<slot name="right-icon">
+					</slot>
+				</template>
 			</template>
 		</u-cell>
 		<view

package/components/u-dropdown/u-dropdown.vue

@@ -244,7 +244,7 @@
 			&__popup {
 				position: relative;
 				z-index: 10;
-				transition: all 0.3s;
+				transition: transform 0.3s;
 				transform: translate3D(0, -100%, 0);
 				overflow: hidden;
 			}

package/components/u-index-list/u-index-list.vue

@@ -521,7 +521,6 @@
 
 		&__letter {
 			position: absolute;
-			margin: auto;
 			right: 0;
 			text-align: center;
 			z-index: 3;

package/components/u-lazy-load/u-lazy-load.vue

@@ -97,7 +97,7 @@
             // 图片高度，单位rpx
             height: {
                 type: [Number, String],
-                default: '450'
+                default: '200'
             }
         },
         data() {
@@ -207,9 +207,12 @@
                 });
             })
             // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+           
             setTimeout(() => {
+                // #ifndef APP-NVUE
                 // 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
                 // this.disconnectObserver('contentObserver');
+                // nvue 里不支持
                 const contentObserver = uni.createIntersectionObserver(this);
                 // 要理解这里怎么计算的，请看这个：
                 // https://blog.csdn.net/qq_25324335/article/details/83687695
@@ -225,6 +228,10 @@
                     }
                 })
                 this.contentObserver = contentObserver;
+                // #endif
+                // #ifdef APP-NVUE
+                this.isShow = true;
+                // #endif
             }, 30)
         }
     }
@@ -239,13 +246,13 @@
     }
 
     .u-lazy-item {
-        width: 100%;
         // 骗系统开启硬件加速
         transform: transition3d(0, 0, 0);
+        /* #ifndef APP-NVUE */
         // 防止图片加载“闪一下”
         will-change: transform;
-        /* #ifndef APP-NVUE */
         display: block;
+        width: 100%;
         /* #endif */
     }
 </style>

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

@@ -315,7 +315,9 @@
 			height: $u-loading-icon-dot-height;
 
 			&:before {
+				/* #ifndef APP-NVUE */
 				display: block;
+				/* #endif */
 				width: $u-loading-icon-dot-before-width;
 				height: $u-loading-icon-dot-before-height;
 				margin: $u-loading-icon-dot-before-margin;

package/components/u-modal/u-modal.vue

@@ -175,6 +175,9 @@
 
 		&__title {
 			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
 			font-size: 16px;
 			font-weight: bold;
 			color: $u-content-color;

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

@@ -407,7 +407,9 @@ export default {
 ._a {
   padding: 1.5px 0 1.5px 0;
   color: #366092;
+  /* #ifndef APP-NVUE */
   word-break: break-all;
+  /* #endif */
 }
 
 /* a 标签点击态效果 */
@@ -425,7 +427,9 @@ export default {
 /* 内部样式 */
 
 ._block {
+  /* #ifndef APP-NVUE */
   display: block;
+  /* #endif */
 }
 
 ._b,
@@ -472,7 +476,9 @@ export default {
 ._h4,
 ._h5,
 ._h6 {
+  /* #ifndef APP-NVUE */
   display: block;
+  /* #endif */
   font-weight: bold;
 }
 
@@ -494,7 +500,9 @@ export default {
 
 ._ol,
 ._ul {
+  /* #ifndef APP-NVUE */
   display: block;
+  /* #endif */
   padding-left: 40px;
   margin: 1em 0;
 }

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

@@ -4,7 +4,9 @@
 		:style="[addStyle(customStyle)]"
 	>
 		<template v-if="!useNative || isRange">
-			<view ref="u-slider-inner" class="u-slider-inner" @tap="onClick"
+			<view ref="u-slider-inner" class="u-slider-inner" @click="onClick"
+				@onTouchStart="onTouchStart2($event, 1)" @touchmove="onTouchMove2($event, 1)"
+				@touchend="onTouchEnd2($event, 1)" @touchcancel="onTouchEnd2($event, 1)"
 				:class="[disabled ? 'u-slider--disabled' : '']" :style="{
 					height: (isRange && showValue) ? (getPx(blockSize) + 24) + 'px' : (getPx(blockSize)) + 'px',
 				}"
@@ -248,6 +250,22 @@
 				}
 				// 标示当前的状态为开始触摸滑动
 				this.status = 'start';
+
+				let clientX = 0;
+				// #ifndef APP-NVUE
+				clientX = touches.clientX;
+				// #endif
+				// #ifdef APP-NVUE
+				clientX = touches.screenX;
+				// #endif
+				this.distanceX = clientX - this.sliderRect.left;
+				// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+				// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+				this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
+				this.status = 'moving';
+				// 发出moving事件
+				this.$emit('changing');
+				this.updateValue(this.newValue, true, index);
 			},
 			onTouchMove(event, index = 1) {
 				if (this.disabled) return;
@@ -255,7 +273,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
@@ -281,6 +299,32 @@
 				}
 				this.status = 'end';
 			},
+			onTouchStart2(event, index = 1) {
+				if (!this.isRange) {
+					this.onChangeStart(event, index);
+				}
+			},
+			onTouchMove2(event, index = 1) {
+				if (!this.isRange) {
+					this.onTouchMove(event, index);
+				}
+			},
+			onTouchEnd2(event, index = 1) {
+				if (!this.isRange) {
+					this.onTouchEnd(event, index);
+				}
+			},
+			onClick(event) {
+				if (this.disabled) return;
+				// 直接点击滑块的情况，计算方式与onTouchMove方法相同
+				// console.log('click', event)
+				// #ifndef APP-NVUE
+				// nvue下暂时无法获取坐标
+				let clientX = event.detail.x - this.sliderRect.left
+				this.newValue = ((clientX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
+				this.updateValue(this.newValue, false, 1);
+				// #endif
+			},
 			updateValue(value, drag, index = 1) {
 				// 去掉小数部分，同时也是对step步进的处理
 				let valueFormat = this.format(value, index);
@@ -350,12 +394,6 @@
 						/ this.step
 					) * this.step;
 				}
-			},
-			onClick(event) {
-				if (this.disabled) return;
-				// 直接点击滑块的情况，计算方式与onTouchMove方法相同
-				const value = ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100;
-				this.updateValue(value, false);
 			}
 		}
 	}

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

@@ -126,6 +126,9 @@
 		align-items: center;
 		justify-content: center;
 		flex: 1;
+		/* #ifndef APP-NVUE */
+		
+		/* #endif */
 		width: 100%;
 		height: 100%;
 		/* #ifdef H5 */

package/components/u-tabs/u-tabs.vue

@@ -20,6 +20,7 @@
 							v-for="(item, index) in list"
 							:key="index"
 							@tap="clickHandler(item, index)"
+							@longpress="longPressHandler(item,index)"
 							:ref="`u-tabs__wrapper__nav__item-${index}`"
 							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
 							:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
@@ -102,7 +103,8 @@
 	 * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
 	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
-	 * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+	 * @event {Function(index)} longPress 长按标签时触发 index: 点击了第几个tab，索引从0开始
+	 * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" @longPress="longPress"></u-tabs>
 	 */
 	export default {
 		name: 'u-tabs',
@@ -160,7 +162,7 @@
 		async mounted() {
 			this.init()
 		},
-		emits: ['click', 'change', 'update:current'],
+		emits: ['click', 'longPress', 'change', 'update:current'],
 		methods: {
 			addStyle,
 			addUnit,
@@ -218,6 +220,13 @@
 					index
 				}, index)
 			},
+			// 长按事件
+			longPressHandler(item, index) {
+				this.$emit('longPress', {
+					...item,
+					index
+				})
+			},
 			init() {
 				sleep().then(() => {
 					this.resize()

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

@@ -1,9 +1,9 @@
 <template>
     <view class="u-waterfall">
-        <view id="u-left-column" class="u-column">
+        <view ref="u-left-column" id="u-left-column" class="u-column">
             <slot name="left" :leftList="leftList"></slot>
         </view>
-        <view id="u-right-column" class="u-column">
+        <view ref="u-right-column" id="u-right-column" class="u-column">
             <slot name="right" :rightList="rightList"></slot>
         </view>
     </view>
@@ -18,6 +18,8 @@
      * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
      * @example <u-waterfall :flowList="flowList"></u-waterfall>
      */
+    import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
     export default {
         name: "u-waterfall",
         props: {
@@ -54,6 +56,7 @@
                 default: 'id'
             }
         },
+        mixins: [mpMixin, mixin],
         data() {
             return {
                 leftList: [],
@@ -156,7 +159,7 @@
                 // #endif
                 // #ifdef VUE3
                 index = this.modelValue.findIndex(val => val[this.idKey] == id);
-                if (index != -1) this.$emit('input', this.modelValue.splice(index, 1));
+                if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1));
                 // #endif
             },
             // 修改某条数据的某个属性
@@ -216,10 +219,13 @@
         @include flex;
         flex: 1;
         flex-direction: column;
+        overflow: hidden;
+        /* #ifndef APP-NVUE */
         height: 100%;
+        /* #endif */
     }
 
     .u-image {
-        width: 100%;
+        max-width: 100%;
     }
 </style>

package/libs/config/props/collapseItem.js

@@ -20,6 +20,7 @@ export default {
         align: 'left',
         name: '',
         icon: '',
-        duration: 300
+        duration: 300,
+        showRight: true
     }
 }

package/libs/css/flex.scss

@@ -216,6 +216,7 @@
 // 多轴交叉时的对齐方式
 
 // 起点对齐
+/* #ifndef APP-NVUE */
 .u-flex-content-start {
 	align-content: flex-start;
 }
@@ -258,6 +259,8 @@
 	flex-shrink: 1;
 }
 
+/* #endif */
+
 // 定义内外边距，历遍1-80
 @for $i from 0 through 80 {
 	// 只要双数和能被5除尽的数

package/libs/mixin/mixin.js

@@ -1,7 +1,11 @@
 import { defineMixin } from '../vue'
-import { deepMerge, $parent } from '../function/index'
+import { deepMerge, $parent, sleep } from '../function/index'
 import test from '../function/test'
 import route from '../util/route'
+// #ifdef APP-NVUE
+// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+const dom = uni.requireNativePlugin('dom')
+// #endif
 
 export const mixin = defineMixin({
     // 定义每个组件都可能需要用到的外部样式以及类名
@@ -107,6 +111,7 @@ export const mixin = defineMixin({
         // 解决办法为在组件根部再套一个没有任何作用的view元素
         $uGetRect(selector, all) {
             return new Promise((resolve) => {
+                // #ifndef APP-NVUE
                 uni.createSelectorQuery()
                     .in(this)[all ? 'selectAll' : 'select'](selector)
                     .boundingClientRect((rect) => {
@@ -118,6 +123,22 @@ export const mixin = defineMixin({
                         }
                     })
                     .exec()
+                // #endif
+                
+                // #ifdef APP-NVUE
+                sleep(30).then(() => {
+                    let selectorNvue = selector.substring(1) // 去掉开头的#或者.
+                    let selectorRef = this.$refs[selectorNvue]
+                    if (!selectorRef) {
+                        console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
+                        resolve({}) 
+                    }
+                    dom.getComponentRect(selectorRef, res => {
+                        // console.log(res)
+                        resolve(res.size)
+                    })
+                })
+                // #endif
             })
         },
         getParentData(parentName = '') {

package/package.json

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

package/types/index.d.ts

@@ -77,9 +77,8 @@ declare module 'uview-plus' {
 	interface Config {
 		v: string;
 		version: string;
-		type: ['primary', 'success', 'info', 'error', 'warning'];
-		color: Record<'u-primary' | 'u-warning' | 'u-success' | 'u-error' | 'u-info' | 'u-main-color' | 'u-content-color' | 'u-tips-color' | 'u-light-color', string>;
-		unit: 'px'
+		color: Partial<Color>;
+		unit: 'px' | 'rpx'
 	}
 	interface Color {
 		primary: string,
@@ -95,7 +94,7 @@ declare module 'uview-plus' {
 		borderColor: string
 	}
 	interface GlobalConfig {
-		config: Config;
+		config: Partial<Config>;
 		props: {};
 	}
 	interface $u {
@@ -149,7 +148,7 @@ declare module 'uview-plus' {
 		platform: string;
 	}
 
-	export function setConfig(config: GlobalConfig): void;
+	export function setConfig(config: Partial<GlobalConfig>): void;
 
 	global {
 		interface Uni {