feat: Tabs组件能否支持自定义插槽 #439

ijry · Jul 27, 2024 · 03ba7fd · 03ba7fd
1 parent c55420e
commit 03ba7fd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/src/pages/componentsC/tabs/tabs.nvue b/src/pages/componentsC/tabs/tabs.nvue
@@ -88,22 +88,36 @@
 			</view>
 		</view>
 		<view class="u-demo-block">
-			<text class="u-demo-block__title">右侧自定义插槽</text>
+			<text class="u-demo-block__title">自定义内容插槽</text>
 			<view class="u-demo-block__content">
-				<up-tabs :list="list1">
-					<view
-						slot="right"
-						style="padding-left: 4px;"
-						@tap="$u.toast('插槽被点击')"
-					>
-						<up-icon
-							name="list"
-							size="21"
-							bold
-						></up-icon>
-					</view>
+				<up-tabs :list="list1">
+					<template #default="scope">
+						<text class="u-tabs__wrapper__nav__item__text"
+							style="color: rgb(96, 98, 102);">
+							{{scope.item[scope.keyName]}}
+						</text>
+					</template>
 				</up-tabs>
 			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">右侧自定义插槽</text>
+			<view class="u-demo-block__content">
+				<up-tabs :list="list1">
+					<template #right>
+						<view
+							style="padding-left: 4px;"
+							@tap="$u.toast('插槽被点击')"
+						>
+							<up-icon
+								name="list"
+								size="21"
+								bold
+							></up-icon>
+						</view>
+					</template>
+				</up-tabs>
+			</view>
 		</view>
 	</view>
 </template>

diff --git a/src/uni_modules/uview-plus/components/u-slider/u-slider.vue b/src/uni_modules/uview-plus/components/u-slider/u-slider.vue
@@ -32,15 +32,15 @@
 				>
 				</view>
 				<view class="u-slider__button-wrap" @touchstart="onTouchStart"
-						@touchmove="onTouchMove" @touchend="onTouchEnd"
-						@touchcancel="onTouchEnd" :style="{left: (getPx(barStyle.width) + getPx(blockSize)/2) + 'px'}">
-						<slot v-if="$slots.default  || $slots.$default"/>
-						<view v-else class="u-slider__button" :style="[blockStyle, {
-							height: getPx(blockSize, true),
-							width: getPx(blockSize, true),
-							backgroundColor: blockColor
-						}]"></view>
-					</view>
+					@touchmove="onTouchMove" @touchend="onTouchEnd"
+					@touchcancel="onTouchEnd" :style="{left: (getPx(barStyle.width) + getPx(blockSize)/2) + 'px'}">
+					<slot v-if="$slots.default  || $slots.$default"/>
+					<view v-else class="u-slider__button" :style="[blockStyle, {
+						height: getPx(blockSize, true),
+						width: getPx(blockSize, true),
+						backgroundColor: blockColor
+					}]"></view>
+				</view>
 			</view>
 			<view class="u-slider__show-value" v-if="showValue">{{ modelValue }}</view>
 		</template>

diff --git a/src/uni_modules/uview-plus/components/u-tabs/u-tabs.vue b/src/uni_modules/uview-plus/components/u-tabs/u-tabs.vue
@@ -24,7 +24,8 @@
 							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
 							:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
 						>
-							<text
+							<slot v-if="$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)]"