cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
1,076 lines (1,075 loc) • 40.8 kB
JavaScript
import { defineComponent, ref, watch, onMounted, onUnmounted, toRefs, nextTick, resolveComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, withModifiers, Fragment, renderList, toDisplayString, createCommentVNode, withDirectives, vShow, createVNode } from "vue";
import { handleComponetEvent, handlePushEvent } from "../tools.mjs";
import ImagePreview from "./imagePreview.mjs";
import Swiper from "../../node_modules/swiper/swiper.esm.mjs";
import "../../node_modules/swiper/swiper-bundle.min.mjs";
import "../../node_modules/swiper/swiper.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
import Autoplay from "../../node_modules/swiper/esm/components/autoplay/autoplay.mjs";
import EffectCoverflow from "../../node_modules/swiper/esm/components/effect-coverflow/effect-coverflow.mjs";
import EffectCube from "../../node_modules/swiper/esm/components/effect-cube/effect-cube.mjs";
import Pagination from "../../node_modules/swiper/esm/components/pagination/pagination.mjs";
import Navigation from "../../node_modules/swiper/esm/components/navigation/navigation.mjs";
import Thumbs from "../../node_modules/swiper/esm/components/thumbs/thumbs.mjs";
import Scrollbar from "../../node_modules/swiper/esm/components/scrollbar/scrollbar.mjs";
import Lazy from "../../node_modules/swiper/esm/components/lazy/lazy.mjs";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation, Thumbs, Scrollbar, Lazy]);
const _sfc_main = defineComponent({
name: "CoCarouselBasics",
components: { ImagePreview },
props: {
dataKey: {
type: String,
required: true
},
width: {
type: String
},
height: {
type: String
},
carouselType: {
type: String,
default: "singleCar"
},
list: {
type: Array,
default: () => {
}
},
slideDirection: {
type: String,
default: "horizontal"
},
speed: { type: Number },
isAutoplay: { type: Boolean },
autoplayTimer: { type: Number },
paginationType: {
type: String,
default: "bullets"
},
paginationBottom: { type: Number },
webJumpType: { type: String },
slidesPerView: {
type: Number,
default: 3
},
spaceBetween: {
type: Number,
default: 30
},
buttonType: {
type: String,
default: "mouse"
},
buttonColor: { type: String, default: "rgba(0, 122, 254,1)" },
heightAuto: { type: Boolean, default: false },
isTextBox: { type: Boolean, default: false },
textHeight: { type: Number },
textAlign: { type: String },
textBottom: { type: Number },
textBgColor: { type: String },
textSize: { type: Number },
fontFamily: { type: String },
textColor: { type: String },
lineHeight: { type: Number },
bgImage: { type: String },
bgSize: { type: String },
imageWidth: { type: String },
imageHeight: { type: String },
imageTop: { type: Number },
textBoxTop: { type: Number },
titleSize: { type: Number },
titleColor: { type: String },
titleAlign: { type: String },
titleFamily: { type: String },
titleMarginB: { type: Number },
sstTextSize: { type: Number },
sstTextColor: { type: String },
sstTextAlign: { type: String },
sstTextFamily: { type: String },
sstTextSpacing: { type: Number, default: 1 },
sstTextClamp: { type: Number, default: 2 },
sstTextBgColor: { type: String },
isImagePre: { type: Boolean, default: true },
clockType: { type: String, default: "middle" },
isLeft: { type: Boolean, default: true },
imageLeft: { type: Number, default: 0 }
},
setup(props) {
const carouselBigBox = ref();
const swiperWrapperBox = ref();
const timeId = ref();
const listData = ref(props.list);
const isSingleCar = ref(true);
const isPerViewRule = ref(true);
const isMerryGoRound = ref(true);
const isSpecialShapedText = ref(true);
const isIconSlide = ref(true);
const isButton = ref(false);
const imgSrc = ref();
const isMask = ref(false);
ref();
const touchstartSwiper = ref();
const touchstartNum = ref(0);
const touchstartTime = ref();
const touchstartTime1 = ref();
const touchstartTime2 = ref();
const getTime = () => {
const charset = `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`;
const maxLen = charset.length;
let ret = "";
for (let i = 0; i < 7; i++) {
const randomIndex = Math.floor(Math.random() * maxLen);
ret += charset[randomIndex];
}
timeId.value = ret;
};
getTime();
const swiperUpdata = ref();
const singleCarInit = () => {
nextTick(() => {
swiperUpdata.value = new Swiper(`.singleCar-swiper${timeId.value}`, {
initialSlide: 0,
direction: props.slideDirection,
autoplay: props.isAutoplay ? {
delay: props.autoplayTimer,
disableOnInteraction: false
} : false,
simulateTouch: false,
speed: props.speed,
grabCursor: true,
loop: true,
lazy: {
loadPrevNext: true
},
scrollbar: {
el: `.singleCar-swiper${timeId.value} .swiper-scrollbar`
},
pagination: {
el: `.singleCar-swiper${timeId.value} .swiper-pagination`,
type: props.paginationType,
clickable: true
},
navigation: {
nextEl: `.singleCar-swiper${timeId.value} .swiper-button-next`,
prevEl: `.singleCar-swiper${timeId.value} .swiper-button-prev`
},
observer: true,
observeParents: true,
observeSlideChildren: true,
on: {
touchStart: (swiper, event) => {
touchstartFn(swiper, event);
}
}
});
return swiperUpdata.value;
});
};
const perViewRuleInit = () => {
nextTick(() => {
swiperUpdata.value = new Swiper(`.perViewRule-swiper${timeId.value}`, {
initialSlide: 0,
direction: props.slideDirection,
autoplay: props.isAutoplay ? {
delay: props.autoplayTimer,
disableOnInteraction: false
} : false,
simulateTouch: false,
speed: props.speed,
grabCursor: true,
slidesPerView: props.slidesPerView,
spaceBetween: props.spaceBetween,
loop: true,
lazy: {
loadPrevNext: true
},
scrollbar: {
el: `.perViewRule-swiper${timeId.value} .swiper-scrollbar`
},
pagination: {
el: `.perViewRule-swiper${timeId.value} .swiper-pagination`,
type: props.paginationType,
clickable: true
},
navigation: {
nextEl: `.perViewRule-swiper${timeId.value} .swiper-button-next`,
prevEl: `.perViewRule-swiper${timeId.value} .swiper-button-prev`
},
observer: true,
observeParents: true,
observeSlideChildren: true,
on: {
touchStart: (swiper, event) => {
touchstartFn(swiper, event);
}
}
});
return swiperUpdata.value;
});
};
const merryGoRoundInit = () => {
nextTick(() => {
swiperUpdata.value = new Swiper(`.merryGoRound-swiper${timeId.value}`, {
initialSlide: 0,
direction: props.slideDirection,
autoplay: props.isAutoplay ? {
delay: props.autoplayTimer,
disableOnInteraction: false
} : false,
simulateTouch: false,
speed: props.speed,
grabCursor: true,
slidesPerView: props.slidesPerView,
spaceBetween: props.spaceBetween,
centeredSlides: true,
loop: true,
lazy: {
loadPrevNext: true
},
scrollbar: {
el: `.merryGoRound-swiper${timeId.value} .swiper-scrollbar`
},
pagination: {
el: `.merryGoRound-swiper${timeId.value} .swiper-pagination`,
type: props.paginationType,
clickable: true
},
navigation: {
nextEl: `.merryGoRound-swiper${timeId.value} .swiper-button-next`,
prevEl: `.merryGoRound-swiper${timeId.value} .swiper-button-prev`
},
observer: true,
observeParents: true,
observeSlideChildren: true,
on: {
click: (swiper, event) => {
},
touchStart: (swiper, event) => {
touchstartFn(swiper, event);
}
}
});
return swiperUpdata.value;
});
};
const specialShapedTextInit = () => {
nextTick(() => {
swiperUpdata.value = new Swiper(`.specialShapedText-swiper${timeId.value}`, {
initialSlide: 0,
direction: props.slideDirection,
autoplay: props.isAutoplay ? {
delay: props.autoplayTimer,
disableOnInteraction: false
} : false,
speed: props.speed,
grabCursor: true,
slidesPerView: props.slidesPerView,
spaceBetween: props.spaceBetween,
centeredSlides: true,
simulateTouch: false,
loop: true,
lazy: {
loadPrevNext: true
},
scrollbar: {
el: `.specialShapedText-swiper${timeId.value} .swiper-scrollbar`
},
pagination: {
el: `.specialShapedText-swiper${timeId.value} .swiper-pagination`,
type: props.paginationType,
clickable: true
},
navigation: {
nextEl: `.specialShapedText-swiper${timeId.value} .swiper-button-next`,
prevEl: `.specialShapedText-swiper${timeId.value} .swiper-button-prev`
},
observer: true,
observeParents: true,
observeSlideChildren: true,
on: {
touchStart: (swiper, event) => {
touchstartFn(swiper, event);
}
}
});
return swiperUpdata.value;
});
};
const iconSlideInit = () => {
let isLoop = true;
if (listData.value.length < props.slidesPerView) {
isLoop = false;
}
nextTick(() => {
swiperUpdata.value = new Swiper(`.iconSlide-swiper${timeId.value}`, {
initialSlide: 0,
direction: props.slideDirection,
autoplay: props.isAutoplay ? {
delay: props.autoplayTimer,
disableOnInteraction: false
} : false,
speed: props.speed,
grabCursor: true,
slidesPerView: props.slidesPerView,
spaceBetween: props.spaceBetween,
simulateTouch: false,
loop: isLoop,
lazy: {
loadPrevNext: true
},
scrollbar: {
el: `.iconSlide-swiper${timeId.value} .swiper-scrollbar`
},
pagination: {
el: `.iconSlide-swiper${timeId.value} .swiper-pagination`,
type: props.paginationType,
clickable: true
},
navigation: {
nextEl: `.iconSlide-swiper${timeId.value} .swiper-button-next`,
prevEl: `.iconSlide-swiper${timeId.value} .swiper-button-prev`
},
observer: true,
observeParents: true,
observeSlideChildren: true,
on: {
tap: (swiper, event) => {
let targetClass = event.target.getAttribute("class");
if (targetClass != "swiper-button-next" && targetClass != "swiper-button-prev") {
let activeIndex2 = event.target.getAttribute("tabIndex");
handleComponetEvent(props.dataKey, "click", {
data: listData.value[activeIndex2],
index: activeIndex2
});
handlePushEvent({
key: "CoCarouselBasics",
elementId: props.dataKey,
event: "click",
data: {
data: listData.value[activeIndex2],
index: activeIndex2
}
});
}
}
}
});
return swiperUpdata.value;
});
};
const singleCarUpdata = () => {
if (props.carouselType === "singleCar") {
isSingleCar.value = false;
nextTick(() => {
isSingleCar.value = true;
singleCarInit();
});
} else if (props.carouselType === "perViewRule") {
isPerViewRule.value = false;
nextTick(() => {
isPerViewRule.value = true;
perViewRuleInit();
});
} else if (props.carouselType === "merryGoRound") {
isMerryGoRound.value = false;
nextTick(() => {
isMerryGoRound.value = true;
merryGoRoundInit();
});
} else if (props.carouselType === "specialShapedText") {
isSpecialShapedText.value = false;
nextTick(() => {
isSpecialShapedText.value = true;
specialShapedTextInit();
});
} else if (props.carouselType === "iconSlide") {
isIconSlide.value = false;
nextTick(() => {
isIconSlide.value = true;
iconSlideInit();
});
}
};
const webJumpFn = (index) => {
if (props.webJumpType === "1") {
window.open(listData.value[index].link || listData.value[index].webSrc);
} else if (props.webJumpType === "0") {
window.location.href = listData.value[index].link || listData.value[index].webSrc;
}
};
const mouseBottonFn = (type) => {
if (props.buttonType !== "mouse")
return;
if (type === "over") {
isButton.value = true;
} else if (type === "out") {
isButton.value = false;
}
};
const mousedownFn = (event) => {
swiperUpdata.value.autoplay.stop();
var x = event.pageX;
var numType = 1;
var transNum = swiperUpdata.value.translate;
document.onmousemove = (e) => {
e.preventDefault();
transNum - (x - e.pageX);
};
document.onmouseup = (e) => {
e.preventDefault();
numType = x - e.pageX;
if (numType > 0 && numType > 60) {
swiperUpdata.value.slideNext();
} else if (numType < 0 && numType < -60) {
swiperUpdata.value.slidePrev();
}
swiperUpdata.value.autoplay.start();
document.onmousemove = null;
document.onmouseup = null;
};
};
const dblclickFn = (event) => {
if (!props.isImagePre)
return;
let targetClass = event.target.localName;
if (targetClass == "img") {
imgSrc.value = event.target.src;
isMask.value = true;
touchstartSwiper.value.autoplay.stop();
}
};
const touchstartFn = (swiper, event) => {
if (!props.isImagePre)
return;
clearTimeout(touchstartTime.value);
if (touchstartNum.value === 0) {
touchstartNum.value++;
touchstartTime1.value = Date.now();
touchstartTime.value = setTimeout(() => {
touchstartNum.value = 0;
}, 500);
} else {
touchstartTime2.value = Date.now();
if (touchstartTime2.value - touchstartTime1.value < 300) {
let targetClass = event.target.localName;
if (targetClass == "img") {
imgSrc.value = event.target.src;
isMask.value = true;
touchstartSwiper.value = swiper;
swiper.autoplay.stop();
}
}
touchstartTime.value = setTimeout(() => {
touchstartNum.value = 0;
}, 500);
}
};
const clickFn = (event, item, index) => {
};
const RESET_VIEW = () => {
var _a;
(_a = swiperUpdata.value) == null ? void 0 : _a.update();
};
const updateList = (newData) => {
listData.value = newData;
singleCarUpdata();
};
watch(
() => props.list,
() => {
listData.value = props.list;
singleCarUpdata();
},
{ deep: true }
);
watch(
() => props.slideDirection,
() => {
singleCarUpdata();
}
);
watch(
() => props.speed,
() => {
singleCarUpdata();
}
);
watch(
() => props.isAutoplay,
() => {
singleCarUpdata();
}
);
watch(
() => props.autoplayTimer,
() => {
singleCarUpdata();
}
);
watch(
() => props.paginationType,
() => {
singleCarUpdata();
}
);
watch(
() => props.slidesPerView,
() => {
singleCarUpdata();
}
);
watch(
() => props.buttonType,
() => {
isButton.value = props.buttonType === "active" ? true : false;
singleCarUpdata();
}
);
watch(
() => props.spaceBetween,
() => {
singleCarUpdata();
}
);
watch(
() => props.heightAuto,
() => {
singleCarUpdata();
}
);
watch(
() => [
props.isTextBox,
props.textHeight,
props.textAlign,
props.textBottom,
props.textBgColor,
props.textSize,
props.textColor
],
() => {
singleCarUpdata();
},
{ deep: true }
);
watch(
() => [
props.bgImage,
props.imageTop,
props.textBoxTop,
props.titleSize,
props.titleColor,
props.titleAlign,
props.titleFamily,
props.sstTextSize,
props.sstTextColor,
props.sstTextAlign,
props.sstTextFamily,
props.sstTextSpacing,
props.sstTextClamp,
props.sstTextBgColor
],
() => {
singleCarUpdata();
},
{ deep: true }
);
watch(
() => isMask.value,
() => {
if (!isMask.value) {
touchstartSwiper.value.autoplay.start();
}
}
);
onMounted(() => {
isButton.value = props.buttonType === "active" ? true : false;
if (props.carouselType === "singleCar") {
singleCarInit();
} else if (props.carouselType === "perViewRule") {
perViewRuleInit();
} else if (props.carouselType === "merryGoRound") {
merryGoRoundInit();
} else if (props.carouselType === "specialShapedText") {
specialShapedTextInit();
} else if (props.carouselType === "iconSlide") {
iconSlideInit();
}
});
onUnmounted(() => {
swiperUpdata.value.destroy(true);
});
const imagePreviewChange = () => {
isMask.value = false;
};
return {
carouselBigBox,
swiperWrapperBox,
timeId,
listData,
isSingleCar,
isPerViewRule,
isMerryGoRound,
isSpecialShapedText,
isIconSlide,
isButton,
imgSrc,
isMask,
webJumpFn,
mouseBottonFn,
mousedownFn,
dblclickFn,
touchstartFn,
clickFn,
RESET_VIEW,
updateList,
imagePreviewChange,
...toRefs(props)
};
}
});
const _hoisted_1 = { class: "carousel-basics__box" };
const _hoisted_2 = {
key: 0,
class: "singleCar-box type-box"
};
const _hoisted_3 = { class: "swiper-slide singleCar_slide" };
const _hoisted_4 = ["src", "onClick"];
const _hoisted_5 = {
key: 1,
class: "swiper-pagination pagination-box",
style: { textAlign: "center" }
};
const _hoisted_6 = {
key: 1,
class: "perViewRule-box type-box"
};
const _hoisted_7 = ["src", "onClick"];
const _hoisted_8 = {
key: 1,
class: "swiper-pagination pagination-box",
style: { textAlign: "center" }
};
const _hoisted_9 = {
key: 2,
class: "merryGoRound-box type-box"
};
const _hoisted_10 = ["src", "onClick"];
const _hoisted_11 = {
key: 1,
class: "swiper-pagination pagination-box",
style: { textAlign: "center" }
};
const _hoisted_12 = {
key: 3,
class: "specialShapedText-box type-box"
};
const _hoisted_13 = ["src", "onClick"];
const _hoisted_14 = {
key: 1,
class: "swiper-pagination pagination-box",
style: { textAlign: "center" }
};
const _hoisted_15 = {
key: 4,
class: "iconSlide-box type-box"
};
const _hoisted_16 = { class: "swiper-wrapper" };
const _hoisted_17 = ["tabIndex"];
const _hoisted_18 = ["src", "tabIndex", "onClick"];
const _hoisted_19 = ["tabIndex"];
const _hoisted_20 = ["tabIndex"];
const _hoisted_21 = ["tabIndex"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ImagePreview = resolveComponent("ImagePreview");
return openBlock(), createElementBlock("div", {
class: "co-carousel-basics",
style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
}, [
createElementVNode("div", _hoisted_1, [
_ctx.carouselType === "singleCar" ? (openBlock(), createElementBlock("div", _hoisted_2, [
_ctx.isSingleCar ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`singleCar-swiper${_ctx.timeId} swiper-box singleCar-container`),
ref: "carouselBigBox",
onMouseover: _cache[1] || (_cache[1] = ($event) => _ctx.mouseBottonFn("over")),
onMouseout: _cache[2] || (_cache[2] = ($event) => _ctx.mouseBottonFn("out")),
onMousedown: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.mousedownFn && _ctx.mousedownFn(...args), ["stop"]))
}, [
createElementVNode("div", {
class: "swiper-wrapper",
ref: "swiperWrapperBox",
onDblclick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.dblclickFn && _ctx.dblclickFn(...args), ["stop"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData, (item, index) => {
return openBlock(), createElementBlock("div", _hoisted_3, [
createElementVNode("img", {
src: item.imgSrc,
alt: "#",
onClick: withModifiers(($event) => _ctx.webJumpFn(index), ["stop"]),
style: normalizeStyle({ height: _ctx.heightAuto ? "auto" : "100%" })
}, null, 12, _hoisted_4),
_ctx.isTextBox ? (openBlock(), createElementBlock("div", {
key: 0,
class: "singleCar_text_box",
style: normalizeStyle({
height: _ctx.textHeight + "px",
textAlign: _ctx.textAlign,
bottom: _ctx.textBottom + "px",
backgroundColor: _ctx.textBgColor,
fontSize: _ctx.textSize + "px",
fontFamily: _ctx.fontFamily,
color: _ctx.textColor
})
}, [
createElementVNode("span", {
style: normalizeStyle({
lineHeight: _ctx.lineHeight + "px",
letterSpacing: _ctx.sstTextSpacing + "px",
"-webkit-line-clamp": _ctx.sstTextClamp
})
}, toDisplayString(item.text), 5)
], 4)) : createCommentVNode("", true)
]);
}), 256))
], 544),
_ctx.paginationType === "scrollbar" ? (openBlock(), createElementBlock("div", {
key: 0,
class: "swiper-scrollbar",
style: normalizeStyle({ backgroundColor: "rgba(255,255,255,.2)" })
}, null, 4)) : createCommentVNode("", true),
_ctx.paginationType !== "scrollbar" && _ctx.paginationType !== "none" ? (openBlock(), createElementBlock("div", _hoisted_5)) : createCommentVNode("", true),
withDirectives(createElementVNode("div", {
class: "swiper-button-prev",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
]),
withDirectives(createElementVNode("div", {
class: "swiper-button-next",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
])
], 34)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
_ctx.carouselType === "perViewRule" ? (openBlock(), createElementBlock("div", _hoisted_6, [
_ctx.isPerViewRule ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`perViewRule-swiper${_ctx.timeId} swiper-box perViewRule-container`),
onMouseover: _cache[5] || (_cache[5] = ($event) => _ctx.mouseBottonFn("over")),
onMouseout: _cache[6] || (_cache[6] = ($event) => _ctx.mouseBottonFn("out")),
onMousedown: _cache[7] || (_cache[7] = withModifiers((...args) => _ctx.mousedownFn && _ctx.mousedownFn(...args), ["stop"]))
}, [
createElementVNode("div", {
class: "swiper-wrapper",
onDblclick: _cache[4] || (_cache[4] = withModifiers((...args) => _ctx.dblclickFn && _ctx.dblclickFn(...args), ["stop"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData, (item, index) => {
return openBlock(), createElementBlock("div", {
class: "swiper-slide perViewRule_slide",
style: normalizeStyle({
backgroundImage: `url(${_ctx.bgImage})`,
backgroundSize: _ctx.bgSize
})
}, [
createElementVNode("img", {
src: item.imgSrc,
alt: "#",
onClick: withModifiers(($event) => _ctx.webJumpFn(index), ["stop"]),
style: normalizeStyle({ height: _ctx.heightAuto ? "auto" : _ctx.imageHeight, width: _ctx.imageWidth })
}, null, 12, _hoisted_7),
_ctx.isTextBox ? (openBlock(), createElementBlock("div", {
key: 0,
class: "perViewRule_text_box",
style: normalizeStyle({
height: _ctx.textHeight + "px",
lineHeight: _ctx.textHeight + "px",
textAlign: _ctx.textAlign,
bottom: _ctx.textBottom + "px",
backgroundColor: _ctx.textBgColor,
fontSize: _ctx.textSize + "px",
fontFamily: _ctx.fontFamily,
color: _ctx.textColor
})
}, toDisplayString(item.text), 5)) : createCommentVNode("", true)
], 4);
}), 256))
], 32),
_ctx.paginationType === "scrollbar" ? (openBlock(), createElementBlock("div", {
key: 0,
class: "swiper-scrollbar",
style: normalizeStyle({ backgroundColor: "rgba(255,255,255,.2)" })
}, null, 4)) : createCommentVNode("", true),
_ctx.paginationType !== "scrollbar" && _ctx.paginationType !== "none" ? (openBlock(), createElementBlock("div", _hoisted_8)) : createCommentVNode("", true),
withDirectives(createElementVNode("div", {
class: "swiper-button-prev",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
]),
withDirectives(createElementVNode("div", {
class: "swiper-button-next",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
])
], 34)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
_ctx.carouselType === "merryGoRound" ? (openBlock(), createElementBlock("div", _hoisted_9, [
_ctx.isMerryGoRound ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`merryGoRound-swiper${_ctx.timeId} swiper-box merryGoRound-container`),
onMouseover: _cache[9] || (_cache[9] = ($event) => _ctx.mouseBottonFn("over")),
onMouseout: _cache[10] || (_cache[10] = ($event) => _ctx.mouseBottonFn("out")),
onMousedown: _cache[11] || (_cache[11] = withModifiers((...args) => _ctx.mousedownFn && _ctx.mousedownFn(...args), ["stop"]))
}, [
createElementVNode("div", {
class: "swiper-wrapper",
onDblclick: _cache[8] || (_cache[8] = withModifiers((...args) => _ctx.dblclickFn && _ctx.dblclickFn(...args), ["stop"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData, (item, index) => {
return openBlock(), createElementBlock("div", {
class: "swiper-slide merryGoRound_slide",
style: normalizeStyle({
backgroundImage: `url(${_ctx.bgImage})`,
backgroundSize: _ctx.bgSize
})
}, [
createElementVNode("img", {
src: item.imgSrc,
alt: "#",
onClick: withModifiers(($event) => _ctx.webJumpFn(index), ["stop"]),
style: normalizeStyle({ height: _ctx.heightAuto ? "auto" : _ctx.imageHeight, width: _ctx.imageWidth })
}, null, 12, _hoisted_10),
_ctx.isTextBox ? (openBlock(), createElementBlock("div", {
key: 0,
class: "merryGoRound_text_box",
style: normalizeStyle({
height: _ctx.textHeight + "px",
textAlign: _ctx.textAlign,
bottom: _ctx.textBottom + "px",
backgroundColor: _ctx.textBgColor,
fontSize: _ctx.textSize + "px",
fontFamily: _ctx.fontFamily,
color: _ctx.textColor
})
}, [
createElementVNode("span", {
style: normalizeStyle({
lineHeight: _ctx.lineHeight + "px",
letterSpacing: _ctx.sstTextSpacing + "px",
"-webkit-line-clamp": _ctx.sstTextClamp
})
}, toDisplayString(item.text), 5)
], 4)) : createCommentVNode("", true)
], 4);
}), 256))
], 32),
_ctx.paginationType === "scrollbar" ? (openBlock(), createElementBlock("div", {
key: 0,
class: "swiper-scrollbar",
style: normalizeStyle({ backgroundColor: "rgba(255,255,255,.2)" })
}, null, 4)) : createCommentVNode("", true),
_ctx.paginationType !== "scrollbar" && _ctx.paginationType !== "none" ? (openBlock(), createElementBlock("div", _hoisted_11)) : createCommentVNode("", true),
withDirectives(createElementVNode("div", {
class: "swiper-button-prev",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
]),
withDirectives(createElementVNode("div", {
class: "swiper-button-next",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
])
], 34)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
_ctx.carouselType === "specialShapedText" ? (openBlock(), createElementBlock("div", _hoisted_12, [
_ctx.isSpecialShapedText ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`specialShapedText-swiper${_ctx.timeId} swiper-box specialShapedText-container`),
onMouseover: _cache[13] || (_cache[13] = ($event) => _ctx.mouseBottonFn("over")),
onMouseout: _cache[14] || (_cache[14] = ($event) => _ctx.mouseBottonFn("out")),
onMousedown: _cache[15] || (_cache[15] = withModifiers((...args) => _ctx.mousedownFn && _ctx.mousedownFn(...args), ["stop"]))
}, [
createElementVNode("div", {
class: "swiper-wrapper",
onDblclick: _cache[12] || (_cache[12] = withModifiers((...args) => _ctx.dblclickFn && _ctx.dblclickFn(...args), ["stop"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData, (item, index) => {
return openBlock(), createElementBlock("div", {
class: "swiper-slide",
style: normalizeStyle({
backgroundImage: `url(${_ctx.bgImage})`,
backgroundSize: _ctx.bgSize
})
}, [
createElementVNode("img", {
src: item.imgSrc,
alt: "#",
onClick: withModifiers(($event) => _ctx.webJumpFn(index), ["stop"]),
style: normalizeStyle({
height: _ctx.heightAuto ? "auto" : _ctx.imageHeight,
width: _ctx.imageWidth,
top: _ctx.imageTop + "px"
})
}, null, 12, _hoisted_13),
createElementVNode("div", {
class: "SST-textBox",
style: normalizeStyle({
backgroundColor: _ctx.sstTextBgColor,
top: _ctx.textBoxTop + "px",
height: _ctx.textHeight + "px"
})
}, [
createElementVNode("h5", {
class: "SST-title",
style: normalizeStyle({
fontSize: _ctx.titleSize + "px",
color: _ctx.titleColor,
textAlign: _ctx.titleAlign,
fontFamily: _ctx.titleFamily,
marginBottom: _ctx.titleMarginB + "px"
})
}, toDisplayString(item.title), 5),
createElementVNode("p", {
class: "SST-text",
style: normalizeStyle({
fontSize: _ctx.sstTextSize + "px",
color: _ctx.sstTextColor,
textAlign: _ctx.sstTextAlign,
fontFamily: _ctx.sstTextFamily,
letterSpacing: _ctx.sstTextSpacing + "px",
"-webkit-line-clamp": _ctx.sstTextClamp
})
}, toDisplayString(item.text), 5)
], 4)
], 4);
}), 256))
], 32),
_ctx.paginationType === "scrollbar" ? (openBlock(), createElementBlock("div", {
key: 0,
class: "swiper-scrollbar",
style: normalizeStyle({ backgroundColor: "rgba(255,255,255,.2)" })
}, null, 4)) : createCommentVNode("", true),
_ctx.paginationType !== "scrollbar" && _ctx.paginationType !== "none" ? (openBlock(), createElementBlock("div", _hoisted_14)) : createCommentVNode("", true),
withDirectives(createElementVNode("div", {
class: "swiper-button-prev",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
]),
withDirectives(createElementVNode("div", {
class: "swiper-button-next",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
])
], 34)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
_ctx.carouselType === "iconSlide" ? (openBlock(), createElementBlock("div", _hoisted_15, [
_ctx.isIconSlide ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`iconSlide-swiper${_ctx.timeId} swiper-box iconSlide-container`),
onMouseover: _cache[16] || (_cache[16] = ($event) => _ctx.mouseBottonFn("over")),
onMouseout: _cache[17] || (_cache[17] = ($event) => _ctx.mouseBottonFn("out")),
onMousedown: _cache[18] || (_cache[18] = withModifiers((...args) => _ctx.mousedownFn && _ctx.mousedownFn(...args), ["stop"]))
}, [
createElementVNode("div", _hoisted_16, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listData, (item, index) => {
return openBlock(), createElementBlock("div", {
class: "swiper-slide iconSlide_slide",
tabIndex: index,
style: normalizeStyle({
backgroundImage: `url(${_ctx.bgImage})`,
backgroundSize: _ctx.bgSize
})
}, [
createElementVNode("img", {
src: item.imgSrc,
tabIndex: index,
alt: "#",
onClick: withModifiers(($event) => _ctx.webJumpFn(index), ["stop"]),
style: normalizeStyle({
height: _ctx.heightAuto ? "auto" : _ctx.imageHeight,
width: _ctx.imageWidth,
top: _ctx.imageTop + "px",
left: _ctx.isLeft ? "unset" : _ctx.imageLeft + "px"
})
}, null, 12, _hoisted_18),
_ctx.isTextBox ? (openBlock(), createElementBlock("div", {
key: 0,
class: "SST-textBox",
tabIndex: index,
style: normalizeStyle({ backgroundColor: "rgba(0,0,0,0)", top: _ctx.textBoxTop + "px" })
}, [
createElementVNode("h5", {
class: "SST-title",
tabIndex: index,
style: normalizeStyle({
fontSize: _ctx.titleSize + "px",
color: _ctx.titleColor,
textAlign: _ctx.titleAlign,
fontFamily: _ctx.titleFamily,
marginBottom: _ctx.titleMarginB + "px"
})
}, toDisplayString(item.title), 13, _hoisted_20),
createElementVNode("p", {
class: "SST-text",
tabIndex: index,
style: normalizeStyle({
fontSize: _ctx.sstTextSize + "px",
color: _ctx.sstTextColor,
textAlign: _ctx.sstTextAlign,
fontFamily: _ctx.sstTextFamily,
letterSpacing: _ctx.sstTextSpacing + "px",
"-webkit-line-clamp": _ctx.sstTextClamp
})
}, toDisplayString(item.text), 13, _hoisted_21)
], 12, _hoisted_19)) : createCommentVNode("", true)
], 12, _hoisted_17);
}), 256))
]),
_ctx.paginationType === "scrollbar" ? (openBlock(), createElementBlock("div", {
key: 0,
class: "swiper-scrollbar",
style: normalizeStyle({ backgroundColor: "rgba(255,255,255,.2)" })
}, null, 4)) : createCommentVNode("", true),
_ctx.paginationType !== "scrollbar" && _ctx.paginationType !== "none" ? (openBlock(), createElementBlock("div", {
key: 1,
class: "swiper-pagination pagination-box",
style: normalizeStyle({ textAlign: "center", bottom: _ctx.paginationBottom + "px" })
}, null, 4)) : createCommentVNode("", true),
withDirectives(createElementVNode("div", {
class: "swiper-button-prev",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
]),
withDirectives(createElementVNode("div", {
class: "swiper-button-next",
style: normalizeStyle({ color: _ctx.buttonColor })
}, null, 4), [
[vShow, _ctx.isButton]
])
], 34)) : createCommentVNode("", true)
])) : createCommentVNode("", true)
]),
createVNode(_component_ImagePreview, {
modelValue: _ctx.isMask,
"onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => _ctx.isMask = $event),
src: _ctx.imgSrc,
"onUpdate:src": _cache[20] || (_cache[20] = ($event) => _ctx.imgSrc = $event),
clockType: _ctx.clockType,
"onUpdate:clockType": _cache[21] || (_cache[21] = ($event) => _ctx.clockType = $event),
onChange: _ctx.imagePreviewChange
}, null, 8, ["modelValue", "src", "clockType", "onChange"])
], 4);
}
var CoCarouselBasics = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f023beaa"]]);
export { CoCarouselBasics as default };