Refactor code structure and remove redundant changes
This commit is contained in:
wangqiao
212
pages/down-drawe-detail/components/swiper.vue
Normal file
212
pages/down-drawe-detail/components/swiper.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="box-border h-631px w-1019px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] pa-30px">
|
||||
<swiper
|
||||
:style="{
|
||||
'--swiper-navigation-color': '#666',
|
||||
'--swiper-pagination-color': '#666',
|
||||
}"
|
||||
:space-between="10"
|
||||
disabled-class=""
|
||||
:thumbs="{ swiper: thumbsSwiper }"
|
||||
:modules="modules"
|
||||
class="mySwiper2"
|
||||
@swiper="onSwiper"
|
||||
@slide-change="changeSwiper"
|
||||
>
|
||||
<swiper-slide v-for="(item, index) in props.data" :key="index"><el-image fit="cover" :src="item.url" /></swiper-slide>
|
||||
<div class="swiper-button-prev color-#fff" @click="handlePrev"></div
|
||||
><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
|
||||
<div class="swiper-button-next color-#fff" @click="handleNext"></div
|
||||
><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="mb-20px mt-34px flex items-center text-16px text-[#333333] font-normal">
|
||||
<div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div
|
||||
><span class="ml-10px">{{ props.type === 1 ? '图纸' : props.type === 2 ? '文本' : '模型' }}</span></div
|
||||
>
|
||||
<div class="box-border h-126px w-1019px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] pa-23px">
|
||||
<swiper
|
||||
:space-between="10"
|
||||
:slides-per-view="4"
|
||||
:free-mode="true"
|
||||
:watch-slides-progress="true"
|
||||
:modules="modules"
|
||||
class="mySwiper"
|
||||
@swiper="setThumbsSwiper"
|
||||
>
|
||||
<swiper-slide v-for="(item, index) in props.data" :key="index">
|
||||
<div class="Thumbs">
|
||||
<el-image fit="cover" :src="item.url" />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, PropType, watch, nextTick } from 'vue'
|
||||
// @ts-ignore
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
|
||||
import 'swiper/css'
|
||||
|
||||
import 'swiper/css/free-mode'
|
||||
import 'swiper/css/navigation'
|
||||
import 'swiper/css/thumbs'
|
||||
|
||||
// import required modules
|
||||
// @ts-ignore
|
||||
import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
|
||||
|
||||
const modules = [FreeMode, Navigation, Thumbs]
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array as PropType<any[]>,
|
||||
default: () => [],
|
||||
},
|
||||
type: {
|
||||
type: Number as PropType<number>,
|
||||
default: 1,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changeSwiper', 'nextSwiper'])
|
||||
|
||||
const thumbsSwiper = ref<any>(null)
|
||||
const useSwiper = ref<any>(null)
|
||||
const activeIndex = ref<number>(0)
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(value) => {
|
||||
if (value.length) {
|
||||
nextTick(() => {
|
||||
const thumb_active = document.querySelector(`.mySwiper .swiper-slide`)
|
||||
thumb_active?.classList.add('swiper-slide-thumb-active')
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const setThumbsSwiper = (swiper: any) => {
|
||||
thumbsSwiper.value = swiper
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
if (activeIndex.value === 0 || props.data.length === 0) {
|
||||
emit('nextSwiper', false)
|
||||
}
|
||||
useSwiper.value.slidePrev()
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (activeIndex.value === props.data.length - 1 || props.data.length === 0) {
|
||||
emit('nextSwiper', true)
|
||||
}
|
||||
useSwiper.value.slideNext()
|
||||
}
|
||||
|
||||
const onSwiper = (swiper: any) => {
|
||||
useSwiper.value = swiper
|
||||
}
|
||||
|
||||
const changeSwiper = (e: any) => {
|
||||
activeIndex.value = e.activeIndex
|
||||
emit('changeSwiper', e.activeIndex)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-button-disabled {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.mySwiper2 {
|
||||
height: 100%;
|
||||
/* height: calc(100vh - 207px); */
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.mySwiper {
|
||||
height: 90px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 6px;
|
||||
|
||||
/* position: absolute;
|
||||
bottom: 0;
|
||||
left: 0px;
|
||||
right: 0px !important; */
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
|
||||
/* z-index: 1000; */
|
||||
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide-thumb-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
/* width: 100%; */
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.Thumbs {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.Thumbs img {
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user