refactor: 优化YlSwiper组件样式和功能

1. 统一颜色值为小写十六进制格式
2. 调整代码格式和缩进
3. 优化分页指示器样式
4. 移除未使用的导航配置
This commit is contained in:
Huangzhe
2025-05-22 20:18:51 +08:00
parent 9c66f5f32f
commit 59b9f258a3

View File

@@ -165,6 +165,7 @@ defineExpose({
</slot> </slot>
</div> </div>
<!-- :navigation="navigationConfig" -->
<swiper-container <swiper-container
ref="swiperRef" ref="swiperRef"
:slides-per-view="slidesPerView" :slides-per-view="slidesPerView"
@@ -174,7 +175,6 @@ defineExpose({
:loop="loop" :loop="loop"
:autoplay="autoplayConfig" :autoplay="autoplayConfig"
:pagination="paginationConfig" :pagination="paginationConfig"
:navigation="navigationConfig"
:breakpoints="breakpoints" :breakpoints="breakpoints"
:allow-touch-move="allowTouchMove" :allow-touch-move="allowTouchMove"
@swiperprogress="onProgress" @swiperprogress="onProgress"
@@ -206,7 +206,9 @@ defineExpose({
<div v-if="pagination" class="yl-swiper-pagination"> <div v-if="pagination" class="yl-swiper-pagination">
<slot name="pagination"> <slot name="pagination">
<div <div
v-for="(_, index) in slides && slides.length ? slides : (swiperInstance?.value?.slides || [])" v-for="(_, index) in slides && slides.length
? slides
: swiperInstance?.value?.slides || []"
:key="index" :key="index"
class="yl-swiper-pagination-bullet" class="yl-swiper-pagination-bullet"
:class="{ 'is-active': swiperInstance?.value?.activeIndex === index }" :class="{ 'is-active': swiperInstance?.value?.activeIndex === index }"
@@ -253,7 +255,7 @@ defineExpose({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
color: #409EFF; color: #409eff;
} }
.yl-swiper-pagination { .yl-swiper-pagination {
@@ -276,7 +278,7 @@ defineExpose({
transition: all 0.3s; transition: all 0.3s;
&.is-active { &.is-active {
background-color: #409EFF; background-color: #409eff;
width: 16px; width: 16px;
border-radius: 4px; border-radius: 4px;
} }