feat: 优化step支持自定义样式prop

ijry · Aug 1, 2024 · 195a243 · 195a243
1 parent 1c771b6
commit 195a243
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/src/pages/componentsC/steps/steps.vue b/src/pages/componentsC/steps/steps.vue
@@ -6,7 +6,8 @@
 				<up-steps :current="current1">
 					<up-steps-item
 					    title="已下单"
-					    desc="10:30"
+					    desc="10:30"
+						:itemStyle="{backgroundColor: '#eee'}"
 					>
 					</up-steps-item>
 					<up-steps-item

diff --git a/src/uni_modules/uview-plus/components/u-index-list/u-index-list.vue b/src/uni_modules/uview-plus/components/u-index-list/u-index-list.vue
@@ -361,16 +361,16 @@
 				// pageY += sys().windowTop
 				// #endif
 				// 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
-				// console.log('top1', top)
-				// console.log('height', height)
+				console.log('top1', top)
+				console.log('height', height)
 				top = top - (height / 2) // 减去transfrom的translateY值导致的高度
 				pageY = pageY - this.topOffset
 				// if (this.safeBottomFix) {
 				// 	pageY = pageY + 34
 				// }
-				// console.log('topOffset', this.topOffset)
-				// console.log('pageY', pageY)
-				// console.log('top2', top)
+				console.log('topOffset', this.topOffset)
+				console.log('pageY', pageY)
+				console.log('top2', top)
 				if (pageY < top) {
 					index = 0
 				} else if (pageY >= top + height) {

diff --git a/src/uni_modules/uview-plus/components/u-steps-item/props.js b/src/uni_modules/uview-plus/components/u-steps-item/props.js
@@ -21,6 +21,11 @@ export const props = defineMixin({
         error: {
             type: Boolean,
             default: () => defProps.stepsItem.error
-        }
+        },
+        // 自定义样式
+        itemStyle: {
+            type: [Object],
+            default: {}
+        },
     }
 })
diff --git a/src/uni_modules/uview-plus/components/u-steps-item/u-steps-item.vue b/src/uni_modules/uview-plus/components/u-steps-item/u-steps-item.vue
@@ -3,7 +3,8 @@
 		<view class="u-steps-item__line" v-if="index + 1 < childLength"
 			:class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
 		<view class="u-steps-item__wrapper"
-			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]">
+			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]"
+			:style="[itemStyle]">
 			<slot name="icon">
 				<view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
 						backgroundColor: statusColor
@@ -111,6 +112,11 @@
 					.current ? this.parentData.activeColor : this.parentData.inactiveColor
 				return style
 			},
+			itemStyle() {
+				return {
+					...this.itemStyle
+				}
+			},
 			statusClass() {
 				const {
 					index,
@@ -231,10 +237,11 @@
 			align-items: center;
 			position: relative;
 			background-color: #fff;
+			border-radius: 50px;
 
 			&--column {
 				width: 20px;
-				height: 32px;
+				height: 20px;
 
 				&--dot {
 					height: 20px;
@@ -243,7 +250,7 @@
 			}
 
 			&--row {
-				width: 32px;
+				width: 20px;
 				height: 20px;
 
 				&--dot {