hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

34
src/components/YlSwiper/Index.vue
View File

@@ -86,7 +86,7 @@ const navigationConfig = computed(() => {
if (hasCustomNavButtons.value) { if (hasCustomNavButtons.value) {
return false; return false;
} }
// 否则使用配置的导航按钮设置 // 否则使用配置的导航按钮设置
if (navigation.value === true) { if (navigation.value === true) {
return {}; return {};
@@ -164,7 +164,8 @@ defineExpose({
<el-icon :size="24"><arrow-left /></el-icon> <el-icon :size="24"><arrow-left /></el-icon>
</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"
@@ -194,19 +194,21 @@ defineExpose({
<slot></slot> <slot></slot>
</template> </template>
</swiper-container> </swiper-container>
<!-- 导航按钮（右） --> <!-- 导航按钮（右） -->
<div v-if="navigation" class="yl-swiper-button-next" @click="slideNext"> <div v-if="navigation" class="yl-swiper-button-next" @click="slideNext">
<slot name="nextButton"> <slot name="nextButton">
<el-icon :size="24"><arrow-right /></el-icon> <el-icon :size="24"><arrow-right /></el-icon>
</slot> </slot>
</div> </div>
<!-- 自定义分页指示器 --> <!-- 自定义分页指示器 -->
<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 }"
@@ -222,7 +224,7 @@ defineExpose({
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.yl-swiper-button-prev, .yl-swiper-button-prev,
.yl-swiper-button-next { .yl-swiper-button-next {
position: absolute; position: absolute;
@@ -234,15 +236,15 @@ defineExpose({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.yl-swiper-button-prev { .yl-swiper-button-prev {
left: 10px; left: 10px;
} }
.yl-swiper-button-next { .yl-swiper-button-next {
right: 10px; right: 10px;
} }
.yl-swiper-button-prev, .yl-swiper-button-prev,
.yl-swiper-button-next { .yl-swiper-button-next {
width: 32px; width: 32px;
@@ -253,9 +255,9 @@ 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 {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
@@ -266,7 +268,7 @@ defineExpose({
align-items: center; align-items: center;
gap: 8px; gap: 8px;
z-index: 10; z-index: 10;
.yl-swiper-pagination-bullet { .yl-swiper-pagination-bullet {
width: 8px; width: 8px;
height: 8px; height: 8px;
@@ -274,9 +276,9 @@ defineExpose({
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
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;
} }