add: slider在弹窗使用示例

ijry · Dec 4, 2024 · 01a8511 · 01a8511
1 parent 8638693
commit 01a8511
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/pages/componentsB/slider/slider.nvue b/src/pages/componentsB/slider/slider.nvue
@@ -73,22 +73,34 @@
 			</view>
 		</view>
 		<view class="u-demo-block">
-			<text class="u-demo-block__title">在弹窗中使用</text>
+			<text class="u-demo-block__title">在Modal弹窗中使用</text>
 			<view class="u-page__slide-item">
 				<up-text @click="modelShow = true" text="打开弹窗"></up-text>
 				<up-modal v-model:show="modelShow">
 				    <view class="slot-content" style="width: 100%">
-				      <up-slider v-model="sliderValue" min="1" max="4" showValue></up-slider>
+				      <up-slider v-if="modelShow" v-model="sliderValue" min="1" max="4" showValue></up-slider>
 				    </view>
 				</up-modal>
 			</view>
 		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">在popup弹窗中使用</text>
+			<view class="u-page__slide-item">
+				<up-text @click="popupShow = true" text="打开弹窗"></up-text>
+				<up-popup v-model:show="popupShow">
+				    <view class="slot-content" style="width: 100%">
+				      <up-slider v-if="popupShow" v-model="sliderValue" min="1" max="4" showValue></up-slider>
+				    </view>
+				</up-popup>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup> 
 import { ref } from "vue";
 const modelShow = ref(false);
+const popupShow = ref(false);
 const sliderValue = ref(4);
 </script>
 

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
@@ -166,6 +166,10 @@
 				// #ifndef APP-NVUE
 				this.$uGetRect('.u-slider__base').then(rect => {
 					this.sliderRect = rect;
+					// console.log('sliderRect', this.sliderRect)
+					if (this.sliderRect.width == 0) {
+						console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
+					}
 					this.init()
 				});
 				// #endif