uview-plus 3.7.0 → 3.7.13

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

@@ -1,7 +1,7 @@
 <template>
 	<view
 		class="u-slider"
-		:style="[addStyle(customStyle)]"
+		:style="[addStyle(customStyle), {width: vertical ? addUnit(this.blockSize): ''}]"
 	>
 		<template v-if="!useNative || isRange">
 			<view ref="u-slider-inner" class="u-slider-inner" @click="onClick"
@@ -13,7 +13,8 @@
 					class="u-slider__base"
 					:style="[
 						{
-							height: height,
+							width: vertical ? addUnit(sizeLocal) : addUnit(length),
+							height: vertical ? addUnit(length) : addUnit(sizeLocal),
 							backgroundColor: inactiveColor
 						}
 					]"
@@ -25,8 +26,6 @@
 					:style="[
 						barStyle,
 						{
-							height: height,
-							marginTop: '-' + height,
 							backgroundColor: activeColor
 						}
 					]"
@@ -37,8 +36,6 @@
 					:style="[
 						barStyle0,
 						{
-							height: height,
-							marginTop: '-' + height,
 							backgroundColor: inactiveColor
 						}
 					]"
@@ -55,7 +52,7 @@
 				<template v-if="isRange">
 					<view class="u-slider__button-wrap u-slider__button-wrap-0" @touchstart="onTouchStart($event, 0)"
 						@touchmove="onTouchMove($event, 0)" @touchend="onTouchEnd($event, 0)"
-						@touchcancel="onTouchEnd($event, 0)" :style="{left: (getPx(barStyle0.width) + getPx(blockSize)/2) + 'px'}">
+						@touchcancel="onTouchEnd($event, 0)" :style="touchButtonStyle(barStyle0)">
 						<slot name="min" v-if="$slots.min || $slots.$min"/>
 						<view v-else class="u-slider__button" :style="[blockStyle, {
 							height: getPx(blockSize, true),
@@ -66,7 +63,7 @@
 				</template>
 				<view class="u-slider__button-wrap" @touchstart="onTouchStart"
 					@touchmove="onTouchMove" @touchend="onTouchEnd"
-					@touchcancel="onTouchEnd" :style="{left: (getPx(barStyle.width) + getPx(blockSize)/2) + 'px'}">
+					@touchcancel="onTouchEnd" :style="touchButtonStyle(barStyle)">
 					<slot name="max" v-if="isRange && ($slots.max || $slots.$max)"/>
 					<slot v-else-if="$slots.default || $slots.$default"/>
 					<view v-else class="u-slider__button" :style="[blockStyle, {
@@ -76,7 +73,9 @@
 					}]"></view>
 				</view>
 			</view>
-			<view class="u-slider__show-value" v-if="showValue && !isRange">{{ modelValue }}</view>
+			<view class="u-slider__show-value" v-if="showValue && !isRange">
+				{{ modelValue }}
+			</view>
 		</template>
 		<slider
 			class="u-slider__native"
@@ -98,10 +97,10 @@
 </template>
 
 <script>
-	import { props } from './props';
-	import { mpMixin } from '../../libs/mixin/mpMixin';
-	import { mixin } from '../../libs/mixin/mixin';
-	import { addStyle, getPx, sleep } from '../../libs/function/index.js';
+	import { props } from './props'
+	import { mpMixin } from '../../libs/mixin/mpMixin'
+	import { mixin } from '../../libs/mixin/mixin'
+	import { addUnit, addStyle, getPx, sleep } from '../../libs/function/index.js'
 	// #ifdef APP-NVUE
 	const dom = uni.requireNativePlugin('dom')
 	// #endif
@@ -130,17 +129,22 @@
 		data() {
 			return {
 				startX: 0,
+				startY: 0,
 				status: 'end',
 				newValue: 0,
 				distanceX: 0,
+				distanceY: 0,
 				startValue0: 0,
 				startValue: 0,
 				barStyle0: {},
 				barStyle: {},
 				sliderRect: {
 					left: 0,
-					width: 0
-				}
+					top: 0,
+					width: 0,
+					height: 0
+				},
+				sizeLocal: '2px'
 			};
 		},
 		watch: {
@@ -173,12 +177,41 @@
             	deep:true
         	}
 		},
-		created() {
+		mounted() {
+			if (this.height != '') {
+				this.sizeLocal = val
+			} else {
+				this.sizeLocal = this.size
+			}
 		},
 		computed: {
+			touchButtonStyle() {
+				return (barStyle) => {
+					let style = {}
+					if (this.blockSize) {
+						if (this.vertical) {
+							style.top = (getPx(barStyle.height) ) + 'px'
+						} else {
+							if (barStyle.width) {
+								style.left = (getPx(barStyle.width) + getPx(this.blockSize)/2) + 'px'
+								// console.log(style)
+							}
+						}
+					}
+					return style
+				}
+			},
 			innerStyleCpu() {
-				let style = this.innerStyle;
-				style.height = (this.isRange && this.showValue) ? (getPx(this.blockSize) + 24) + 'px' : (getPx(this.blockSize)) + 'px';
+				let style = {...this.innerStyle};
+				if (this.vertical) {
+					style.flexDirection = 'row'
+					style.height = this.length
+					style.padding = '0'
+					style.width = (this.isRange && this.showValue) ? (getPx(this.blockSize) + 24) + 'px' : (getPx(this.blockSize)) + 'px';
+				} else {
+					style.flexDirection = 'column'
+					style.height = (this.isRange && this.showValue) ? (getPx(this.blockSize) + 24) + 'px' : (getPx(this.blockSize)) + 'px';
+				}
 				return style;
 			}
 		},
@@ -202,8 +235,10 @@
 					dom.getComponentRect(ref, (res) => {
 						// console.log(res)
 						this.sliderRect = {
+							top: res.size.top,
 							left: res.size.left,
-							width: res.size.width
+							width: res.size.width,
+							height: res.size.height
 						};
 						this.init()
 					})
@@ -211,6 +246,7 @@
 			}
 		},
 		methods: {
+			addUnit,
 			addStyle,
 			getPx,
 			init() {
@@ -259,10 +295,12 @@
 			onTouchStart(event, index = 1) {
 				if (this.disabled) return;
 				this.startX = 0;
+				this.startY = 0;
 				// 触摸点集
 				let touches = event.touches[0];
 				// 触摸点到屏幕左边的距离
 				this.startX = touches.clientX;
+				this.startY = touches.clientY;
 				// 此处的this.modelValue虽为props值，但是通过$emit('update:modelValue')进行了修改
 				if (this.isRange) {
 					this.startValue0 = this.format(this.rangeValue[0], 0);
@@ -277,18 +315,30 @@
 				}
 				// 标示当前的状态为开始触摸滑动
 				this.status = 'start';
+				// console.log('start', this.startValue)
 
 				let clientX = 0;
+				let clientY = 0;
 				// #ifndef APP-NVUE
 				clientX = touches.clientX;
+				clientY = touches.clientY;
 				// #endif
 				// #ifdef APP-NVUE
 				clientX = touches.screenX;
+				clientY = touches.screenY;
 				// #endif
-				this.distanceX = clientX - this.sliderRect.left;
-				// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
-				// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
-				this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
+				if (this.vertical) {
+					this.distanceY = clientY - this.sliderRect.top;
+					// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+					// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+					this.newValue = ((this.distanceY / this.sliderRect.height) * (this.max - this.min)) + parseFloat(this.min);
+				} else {
+					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事件
 				let $crtFmtValue = this.updateValue(this.newValue, true, index);
@@ -303,16 +353,26 @@
 				// console.log('touchs', touches)
 				// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
 				let clientX = 0;
+				let clientY = 0;
 				// #ifndef APP-NVUE
 				clientX = touches.clientX;
+				clientY = touches.clientY;
 				// #endif
 				// #ifdef APP-NVUE
 				clientX = touches.screenX;
+				clientY = touches.screenY;
 				// #endif
-				this.distanceX = clientX - this.sliderRect.left;
-				// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
-				// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
-				this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
+				if (this.vertical) {
+					this.distanceY = clientY - this.sliderRect.top;
+					// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+					// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+					this.newValue = ((this.distanceY / this.sliderRect.height) * (this.max - this.min)) + parseFloat(this.min);
+				} else {
+					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事件
 				let $crtFmtValue = this.updateValue(this.newValue, true, index);
@@ -348,23 +408,40 @@
 				// 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);
+				if (this.vertical) {
+					let clientY = event.detail.y - this.sliderRect.top
+					// console.log(this.sliderRect.top, event.detail.y)
+					this.newValue = ((clientY / this.sliderRect.height) * (this.max - this.min)) + parseFloat(this.min)
+					this.updateValue(this.newValue, false, 1)
+				} else {
+					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);
+				let valueFormat = this.format(value, index)
 				// 不允许滑动的值超过max最大值
 				if(valueFormat > this.max ) {
 					valueFormat = this.max
 				}
 				// 设置移动的距离，不能用百分比，因为NVUE不支持。
-				let width = Math.min((valueFormat - this.min) / (this.max - this.min) * this.sliderRect.width, this.sliderRect.width)
-				let barStyle = {
-					width: width + 'px'
-				};
+				let sliderLength = 0
+				let barStyle = {}
+				if (this.vertical) {
+					sliderLength = Math.min((valueFormat - this.min) / (this.max - this.min) * this.sliderRect.height, this.sliderRect.height)
+					barStyle['height'] = addUnit(sliderLength)
+					barStyle['width'] = addUnit(this.sizeLocal)
+					barStyle['marginLeft'] = '-' + getPx(this.sizeLocal, true)
+				} else {
+					sliderLength = Math.min((valueFormat - this.min) / (this.max - this.min) * this.sliderRect.width, this.sliderRect.width)
+					barStyle['width'] = addUnit(sliderLength)
+					barStyle['height'] = addUnit(this.sizeLocal)
+					barStyle['marginTop'] = '-' + getPx(this.sizeLocal, true)
+				}
+				
 				// 移动期间无需过渡动画
 				if (drag == true) {
 					barStyle.transition = 'none';

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

@@ -3,49 +3,28 @@
 		<view class="u-tabs__wrapper">
 			<slot name="left" />
 			<view class="u-tabs__wrapper__scroll-view-wrapper">
-				<scroll-view
-					:scroll-x="scrollable"
-					:scroll-left="scrollLeft"
-					scroll-with-animation
-					class="u-tabs__wrapper__scroll-view"
-					:show-scrollbar="false"
-					ref="u-tabs__wrapper__scroll-view"
-				>
-					<view
-						class="u-tabs__wrapper__nav"
-						ref="u-tabs__wrapper__nav"
-					>
-						<view
-							class="u-tabs__wrapper__nav__item"
-							v-for="(item, index) in list"
-							:key="index"
-							@tap="clickHandler(item, index)"
-							@longpress="longPressHandler(item,index)"
+				<scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
+					class="u-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="u-tabs__wrapper__scroll-view">
+					<view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
+						<view class="u-tabs__wrapper__nav__item" v-for="(item, index) in tabList" :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}`,
+							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
 								item.disabled && 'u-tabs__wrapper__nav__item--disabled',
-								innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']"
-						>
+								innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']">
 							<slot v-if="$slots.icon" name="icon" :item="item" :keyName="keyName" :index="index" />
 							<template v-else>
 								<view class="u-tabs__wrapper__nav__item__prefix-icon" v-if="item.icon">
-									<up-icon
-										:name="item.icon"
-										:customStyle="addStyle(iconStyle)"
-									></up-icon>
+									<up-icon :name="item.icon" :customStyle="addStyle(iconStyle)"></up-icon>
 								</view>
 							</template>
 							<slot v-if="$slots.content" name="content" :item="item" :keyName="keyName" :index="index" />
-							<slot v-else-if="!$slots.content && ($slots.default || $slots.$default)"
-								:item="item" :keyName="keyName" :index="index" />
-							<text v-else
-								:class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
+							<slot v-else-if="!$slots.content && ($slots.default || $slots.$default)" :item="item"
+								:keyName="keyName" :index="index" />
+							<text v-else :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
 								class="u-tabs__wrapper__nav__item__text"
-								:style="[textStyle(index)]"
-							>{{ item[keyName] }}</text>
-							<u-badge
-								:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
+								:style="[textStyle(index)]">{{ item[keyName] }}</text>
+							<u-badge :show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
 								:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
 								:value="item.badge && item.badge.value || propsBadge.value"
 								:max="item.badge && item.badge.max || propsBadge.max"
@@ -56,35 +35,28 @@
 								:shape="item.badge && item.badge.shape || propsBadge.shape"
 								:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
 								:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
-								customStyle="margin-left: 4px;"
-							></u-badge>
+								customStyle="margin-left: 4px;"></u-badge>
 						</view>
 						<!-- #ifdef APP-NVUE -->
-						<view
-							class="u-tabs__wrapper__nav__line"
-							ref="u-tabs__wrapper__nav__line"
-							:style="[{
+						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
 								width: addUnit(lineWidth),
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
-							}]"
-						>
+							}]">
 						</view>
 						<!-- #endif -->
 						<!-- #ifndef APP-NVUE -->
-						<view
-							class="u-tabs__wrapper__nav__line"
-							ref="u-tabs__wrapper__nav__line"
+						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line"
 							:style="[{
 								width: addUnit(lineWidth),
 								transform: `translate(${lineOffsetLeft}px)`,
-								transitionDuration: `${firstTime ? 0 : duration}ms`,
+								transitionDuration: `${duration}ms`,
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
-							}]"
-						>
+								display: lineShow ? 'block': 'none'
+							}]">
 						</view>
 						<!-- #endif -->
 					</view>
@@ -100,11 +72,25 @@
 	const animation = uni.requireNativePlugin('animation')
 	const dom = uni.requireNativePlugin('dom')
 	// #endif
-	import { props } from './props';
-	import { mpMixin } from '../../libs/mixin/mpMixin';
-	import { mixin } from '../../libs/mixin/mixin';
+	import {
+		props
+	} from './props';
+	import {
+		mpMixin
+	} from '../../libs/mixin/mpMixin';
+	import {
+		mixin
+	} from '../../libs/mixin/mixin';
 	import defProps from '../../libs/config/props.js'
-	import { addUnit, addStyle, deepMerge, getPx, sleep, getWindowInfo } from '../../libs/function/index';
+	import {
+		addUnit,
+		addStyle,
+		deepMerge,
+		deepClone,
+		getPx,
+		sleep,
+		getWindowInfo
+	} from '../../libs/function/index';
 	/**
 	 * Tabs 标签
 	 * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
@@ -122,10 +108,11 @@
 		mixins: [mpMixin, mixin, props],
 		data() {
 			return {
-				firstTime: true,
+				tabList: [],
 				scrollLeft: 0,
 				scrollViewWidth: 0,
 				lineOffsetLeft: 0,
+				lineShow: false,
 				tabsRect: {
 					left: 0
 				},
@@ -136,7 +123,7 @@
 		watch: {
 			current: {
 				immediate: true,
-				handler (newValue, oldValue) {
+				handler(newValue, oldValue) {
 					// 内外部值不相等时，才尝试移动滑块
 					if (newValue !== this.innerCurrent) {
 						if (typeof newValue == 'string') {
@@ -151,10 +138,16 @@
 				}
 			},
 			// list变化时，重新渲染list各项信息
-			list() {
-				this.$nextTick(() => {
-					this.resize()
-				})
+			list: {
+				handler(newValue, oldValue) {
+					// 重新拷贝一份list用于增加其他额外信息处理后导致重复监听的死循环
+					this.tabList = deepClone(newValue);
+					this.$nextTick(() => {
+						this.resize()
+					})
+				},
+				immediate: true,
+				deep: true,
 			}
 		},
 		computed: {
@@ -162,11 +155,11 @@
 				return index => {
 					const style = {}
 					// 取当期是否激活的样式
-					const customeStyle = (index == this.innerCurrent)
-						? addStyle(this.activeStyle) 
-						: addStyle(this.inactiveStyle)
+					const customeStyle = (index == this.innerCurrent) ?
+						addStyle(this.activeStyle) :
+						addStyle(this.inactiveStyle)
 					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
-					if (this.list[index].disabled) {
+					if (this.tabList[index].disabled) {
 						style.color = '#c8c9cc'
 					}
 					return deepMerge(customeStyle, style)
@@ -178,42 +171,37 @@
 		},
 		async mounted() {
 			this.init()
-            this.windowResizeCallback = (res) => {
-                this.init()
-            }
-            uni.onWindowResize(this.windowResizeCallback)
+			this.windowResizeCallback = (res) => {
+				this.init()
+			}
+			uni.onWindowResize(this.windowResizeCallback)
+		},
+		beforeUnmount() {
+			uni.offWindowResize(this.windowResizeCallback)
 		},
-        beforeUnmount() {
-            uni.offWindowResize(this.windowResizeCallback)
-        },
 		emits: ['click', 'longPress', 'change', 'update:current'],
 		methods: {
 			addStyle,
 			addUnit,
 			setLineLeft() {
-				const tabItem = this.list[this.innerCurrent];
+				const tabItem = this.tabList[this.innerCurrent];
 				if (!tabItem) {
 					return;
 				}
 				// 获取滑块该移动的位置
-				let lineOffsetLeft = this.list
+				let lineOffsetLeft = this.tabList
 					.slice(0, this.innerCurrent)
 					.reduce((total, curr) => total + curr.rect.width, 0);
-                // 获取下划线的数值px表示法
+				// 获取下划线的数值px表示法
 				const lineWidth = getPx(this.lineWidth);
 				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
 				// #ifdef APP-NVUE
 				// 第一次移动滑块，无需过渡时间
-				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
+				this.animation(this.lineOffsetLeft, parseInt(this.duration))
 				// #endif
 
-				// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
-				// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
-				if (this.firstTime) {
-					setTimeout(() => {
-						this.firstTime = false
-					}, 10);
-				}
+				// 如果是第一次执行此方法，滑块默认不显示，在加载完成后进行显示
+				if (!this.lineShow) this.lineShow = true;
 			},
 			// nvue下设置滑块的位置
 			animation(x, duration = 0) {
@@ -239,9 +227,9 @@
 				// 如果点击当前不触发change
 				if (this.innerCurrent == index) return
 				this.innerCurrent = index
-                this.$nextTick(() => {
-                    this.resize()
-                })
+				this.$nextTick(() => {
+					this.resize()
+				})
 				this.$emit('update:current', index)
 				this.$emit('change', {
 					...item,
@@ -263,11 +251,11 @@
 			setScrollLeft() {
 				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
 				if (this.innerCurrent < 0) {
-                    this.innerCurrent = 0;
-                }
-				const tabRect = this.list[this.innerCurrent]
+					this.innerCurrent = 0;
+				}
+				const tabRect = this.tabList[this.innerCurrent]
 				// 累加得到当前item到左边的距离
-				const offsetLeft = this.list
+				const offsetLeft = this.tabList
 					.slice(0, this.innerCurrent)
 					.reduce((total, curr) => {
 						return total + curr.rect.width
@@ -284,13 +272,14 @@
 			// 获取所有标签的尺寸
 			resize() {
 				// 如果不存在list，则不处理
-				if(this.list.length === 0) {
+				if (this.tabList.length === 0) {
 					return
 				}
 				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
 					// 兼容在swiper组件中使用
 					if (tabsRect.left > tabsRect.width) {
-						tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect.width
+						tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect
+							.width
 						tabsRect.left = tabsRect.left % tabsRect.width
 					}
 					// console.log(tabsRect)
@@ -300,7 +289,7 @@
 						// 计算scroll-view的宽度，这里
 						this.scrollViewWidth += item.width
 						// 另外计算每一个item的中心点X轴坐标
-						this.list[index].rect = item
+						this.tabList[index].rect = item
 					})
 					// 获取了tabs的尺寸之后，设置滑块的位置
 					this.setLineLeft()
@@ -316,9 +305,9 @@
 			// 获取所有标签的尺寸
 			getAllItemRect() {
 				return new Promise(resolve => {
-					const promiseAllArr = this.list.map((item, index) => this.queryRect(
-						`u-tabs__wrapper__nav__item-${index}`, true))
-					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+					const promiseAllArr = this.tabList.map((item, index) => this.queryRect(
+						`u-tabs__wrapper__nav__item-${index}`, true));
+					Promise.all(promiseAllArr).then(sizes => resolve(sizes));
 				})
 			},
 			// 获取各个标签的尺寸
@@ -348,7 +337,6 @@
 </script>
 
 <style lang="scss" scoped>
-
 	.u-tabs {
 
 		&__wrapper {
@@ -389,7 +377,7 @@
 					&__text {
 						font-size: 15px;
 						color: $u-content-color;
-                        white-space: nowrap !important;
+						white-space: nowrap !important;
 
 						&--disabled {
 							color: $u-disabled-color !important;

package/libs/css/flex.scss

@@ -250,7 +250,7 @@
 // 子元素交叉轴终点对齐
 .u-flex-self-end,
 .up-flex-self-end {
-	align-self: flex-en !important;
+	align-self: flex-end !important;
 }
 
 // 子元素交叉轴第一行文字基线对齐
@@ -366,3 +366,4 @@
 		}
 	}
 }
+

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.7.0",
+  "version": "3.7.13",
   "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",
@@ -102,8 +102,6 @@
     }
   },
   "dependencies": {
-    "clipboard": "^2.0.11",
-    "dayjs": "^1.11.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"