轮播图支持两个半或者一个半
于肖磊
parent
dae5212dbf
commit
a13ad552e0
|
|
@ -17,9 +17,9 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<div class="cube-selected-text">
|
||||
{{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
|
||||
x
|
||||
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
|
||||
x
|
||||
{{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
|
||||
像素
|
||||
<template v-if="props.type == 'data'">
|
||||
<div>{{ data_title(item) }}</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<div ref="swiperSize" class="swiper-container w h">
|
||||
<swiper
|
||||
:key="carouselKey"
|
||||
:class="{'swiper-card': interval_types }"
|
||||
:class="[`swiper-right-${swiper_style.slidesPerView}`, {'swiper-card': interval_types}]"
|
||||
direction="horizontal"
|
||||
:loop="true"
|
||||
:effect="interval_types ? 'coverflow': 'slide'"
|
||||
:autoplay="autoplay"
|
||||
:allow-touch-move="false"
|
||||
:speed="500"
|
||||
slides-per-view="auto"
|
||||
:space-between="0"
|
||||
:initial-slide="4"
|
||||
:centered-slides="true"
|
||||
:slides-per-view="swiper_style.slidesPerView"
|
||||
:space-between="swiper_style.spaceBetween"
|
||||
:centered-slides="swiper_style.centeredSlides"
|
||||
:pause-on-mouse-enter="true"
|
||||
:modules="modules"
|
||||
:coverflow-effect="interval_types ? {
|
||||
|
|
@ -64,6 +64,7 @@
|
|||
</div>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer } from '@/utils';
|
||||
|
|
@ -153,7 +154,37 @@ const interval_list = ref({
|
|||
length: 0
|
||||
})
|
||||
|
||||
const interval_types = computed(() => interval_type.value == 'card' );
|
||||
const interval_types = computed(() => interval_type.value == 'card');
|
||||
const swiper_Width = ref(390);
|
||||
const swiper_right_2 = computed(() => ((swiper_Width.value - new_style.value.image_spacing) / 2) + 'px');
|
||||
const swiper_right_3 = computed(() => ((swiper_Width.value - (new_style.value.image_spacing * 2)) / 3) + 'px');
|
||||
const negative_swiper_right_2 = computed(() => '-' + swiper_right_2.value);
|
||||
const negative_swiper_right_3 = computed(() => '-' + swiper_right_3.value);
|
||||
const swiperSize = ref<any>(null);
|
||||
onMounted(() => {
|
||||
if (swiperSize.value) {
|
||||
swiper_Width.value = swiperSize.value.clientWidth;
|
||||
}
|
||||
});
|
||||
const swiper_style = computed(() => {
|
||||
let slidesPerView: number | "auto" | undefined = 'auto';
|
||||
let centeredSlides = true;
|
||||
let spaceBetween = 0;
|
||||
if (form.value.carousel_type == 'oneDragOne') {
|
||||
slidesPerView = 2;
|
||||
centeredSlides = false;
|
||||
spaceBetween = new_style.value.image_spacing;
|
||||
} else if (form.value.carousel_type == 'twoDragOne') {
|
||||
slidesPerView = 3;
|
||||
centeredSlides = false
|
||||
spaceBetween = new_style.value.image_spacing;
|
||||
}
|
||||
return {
|
||||
slidesPerView: slidesPerView,
|
||||
centeredSlides: centeredSlides,
|
||||
spaceBetween: spaceBetween
|
||||
}
|
||||
});
|
||||
// 视频播放按钮显示逻辑
|
||||
const video_style = computed(() => {
|
||||
let style = `bottom: ${new_style.value.video_bottom}px;`;
|
||||
|
|
@ -200,6 +231,14 @@ watchEffect(() => {
|
|||
//#endregion
|
||||
});
|
||||
|
||||
watch(() => new_style.value.common_style, () => {
|
||||
nextTick(() => {
|
||||
if (swiperSize.value) {
|
||||
swiper_Width.value = swiperSize.value.clientWidth;
|
||||
}
|
||||
})
|
||||
}, {deep: true});
|
||||
|
||||
const slideChange = (swiper: { realIndex: number }) => {
|
||||
if (swiper.realIndex > form.value.carousel_list.length - 1) {
|
||||
const seat_length = seat_list.value.length;
|
||||
|
|
@ -218,6 +257,8 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
<style lang="scss" scoped>
|
||||
.dot {
|
||||
z-index: 1;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
&.active {
|
||||
|
|
@ -242,6 +283,20 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
}
|
||||
}
|
||||
|
||||
/* 这里的样式是为了模拟next-margin的效果 */
|
||||
.swiper-container .swiper-right-2 {
|
||||
margin-right: v-bind(negative_swiper_right_2);
|
||||
.dot {
|
||||
padding-right: v-bind(swiper_right_2);
|
||||
}
|
||||
}
|
||||
.swiper-container .swiper-right-3 {
|
||||
margin-right: v-bind(negative_swiper_right_3);
|
||||
.dot {
|
||||
padding-right: v-bind(swiper_right_3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.swiper-slide) {
|
||||
.item-image {
|
||||
background: #F8FDFF;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<el-radio-group v-model="form.carousel_type">
|
||||
<el-radio value="inherit">样式一</el-radio>
|
||||
<el-radio value="card">样式二</el-radio>
|
||||
<el-radio value="oneDragOne">样式三</el-radio>
|
||||
<el-radio value="twoDragOne">样式四</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片设置">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@
|
|||
<el-form-item label="高度设置">
|
||||
<slider v-model="form.height" :max="1000"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)" label="图片间距">
|
||||
<slider v-model="form.image_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
|
|
|
|||
|
|
@ -355,6 +355,8 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
|
|||
right: 0;
|
||||
}
|
||||
.dot {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
z-index: 3;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<image-empty v-model="item.img[0]"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="cube-selected-text">250 x 750 像素</div>
|
||||
<div class="cube-selected-text"> 250 x 750 像素</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -173,6 +173,8 @@ const carousel_change = (index: number) => {
|
|||
width: v-bind(group_width);
|
||||
}
|
||||
.dot {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ interface defaultSearch {
|
|||
radius_bottom_right: number;
|
||||
is_show: string;
|
||||
height: number,
|
||||
image_spacing: number,
|
||||
indicator_style: string;
|
||||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
|
|
@ -81,6 +82,7 @@ const defaultSearch: defaultSearch = {
|
|||
radius_bottom_right: 0,
|
||||
is_show: '1',
|
||||
height: 300,
|
||||
image_spacing: 10,
|
||||
indicator_style: 'dot',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
|
|
|
|||
Loading…
Reference in New Issue