refactor: 优化YlSwiper组件样式和功能
1. 统一颜色值为小写十六进制格式 2. 调整代码格式和缩进 3. 优化分页指示器样式 4. 移除未使用的导航配置
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user