refactor: 优化YlSwiper组件样式和功能
1. 统一颜色值为小写十六进制格式 2. 调整代码格式和缩进 3. 优化分页指示器样式 4. 移除未使用的导航配置
This commit is contained in:
@@ -165,6 +165,7 @@ defineExpose({
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- :navigation="navigationConfig" -->
|
||||
<swiper-container
|
||||
ref="swiperRef"
|
||||
:slides-per-view="slidesPerView"
|
||||
@@ -174,7 +175,6 @@ defineExpose({
|
||||
:loop="loop"
|
||||
:autoplay="autoplayConfig"
|
||||
:pagination="paginationConfig"
|
||||
:navigation="navigationConfig"
|
||||
:breakpoints="breakpoints"
|
||||
:allow-touch-move="allowTouchMove"
|
||||
@swiperprogress="onProgress"
|
||||
@@ -206,7 +206,9 @@ defineExpose({
|
||||
<div v-if="pagination" class="yl-swiper-pagination">
|
||||
<slot name="pagination">
|
||||
<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"
|
||||
class="yl-swiper-pagination-bullet"
|
||||
:class="{ 'is-active': swiperInstance?.value?.activeIndex === index }"
|
||||
@@ -253,7 +255,7 @@ defineExpose({
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||
color: #409EFF;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.yl-swiper-pagination {
|
||||
@@ -276,7 +278,7 @@ defineExpose({
|
||||
transition: all 0.3s;
|
||||
|
||||
&.is-active {
|
||||
background-color: #409EFF;
|
||||
background-color: #409eff;
|
||||
width: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user