1
This commit is contained in:
1
package/component/es/carousel/index.css
Normal file
1
package/component/es/carousel/index.css
Normal file
@@ -0,0 +1 @@
|
||||
.layui-carousel{position:relative;left:0;top:0;background-color:#f8f8f8}.layui-carousel>[carousel-item]{position:relative;width:100%;height:100%;overflow:hidden}.layui-carousel>[carousel-item]:before{position:absolute;content:"\e63d";left:50%;top:50%;width:100px;line-height:20px;margin:-10px 0 0 -50px;text-align:center;color:var(--global-neutral-color-8);font-family:layui-icon!important;font-size:30px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-carousel>[carousel-item]>*{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#f8f8f8;transition-duration:.3s;-webkit-transition-duration:.3s;overflow:hidden;visibility:hidden}.layui-carousel-updown>*{-webkit-transition:.3s ease-in-out up;transition:.3s ease-in-out up}.layui-carousel-arrow{display:none\ ;opacity:0;position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;border:0;border-radius:50%;background-color:#0003;color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;cursor:pointer}.layui-carousel-arrow[lay-type=add]{left:auto!important;right:10px}.layui-carousel:hover .layui-carousel-arrow[lay-type=add],.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add]{right:20px}.layui-carousel[lay-arrow=always] .layui-carousel-arrow{opacity:1;left:20px}.layui-carousel[lay-arrow=none] .layui-carousel-arrow{display:none}.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:#00000059}.layui-carousel:hover .layui-carousel-arrow{display:block\ ;opacity:1;left:20px}.layui-carousel-ind{position:relative;top:-35px;width:100%;line-height:0!important;text-align:center;font-size:0}.layui-carousel[lay-indicator=outside]{margin-bottom:30px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind{top:10px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:#00000080}.layui-carousel[lay-indicator=none] .layui-carousel-ind{display:none}.layui-carousel-ind ul{display:inline-block;padding:5px;background-color:#0003;border-radius:10px;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li{display:inline-block;width:10px;height:10px;margin:0 3px;font-size:14px;background-color:var(--global-neutral-color-3);background-color:#ffffff80;border-radius:50%;cursor:pointer;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li:hover{background-color:#ffffffb3}.layui-carousel-ind li.layui-this{background-color:#fff}.layui-carousel>[carousel-item]>.layui-carousel-next,.layui-carousel>[carousel-item]>.layui-carousel-prev,.layui-carousel>[carousel-item]>.layui-this{display:block}.layui-carousel>[carousel-item]>.layui-this{left:0}.layui-carousel>[carousel-item]>.layui-carousel-prev{left:-100%}.layui-carousel>[carousel-item]>.layui-carousel-next{left:100%}.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right{left:0}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left{left:-100%}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right{left:100%}.layui-carousel[lay-anim=updown] .layui-carousel-arrow{left:50%!important;top:20px;margin:0 0 0 -18px}.layui-carousel[lay-anim=updown]>[carousel-item]>*,.layui-carousel[lay-anim=fade]>[carousel-item]>*{left:0!important}.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add]{top:auto!important;bottom:20px}.layui-carousel[lay-anim=updown] .layui-carousel-ind{position:absolute;top:50%;right:20px;width:auto;height:auto;transform:translateY(-50%)}.layui-carousel[lay-anim=updown] .layui-carousel-ind ul{padding:3px 5px}.layui-carousel[lay-anim=updown] .layui-carousel-ind li{display:block;margin:6px 0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next{top:100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right{top:100%}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev{opacity:0}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{opacity:1}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right{opacity:0}
|
||||
3
package/component/es/carousel/index.js
Normal file
3
package/component/es/carousel/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import "../badge/index2.js";
|
||||
export { c as default } from "./index2.js";
|
||||
import "vue";
|
||||
267
package/component/es/carousel/index2.js
Normal file
267
package/component/es/carousel/index2.js
Normal file
@@ -0,0 +1,267 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, inject, ref, computed, openBlock, createElementBlock, normalizeStyle, unref, renderSlot, useSlots, watch, provide, createElementVNode, Fragment, renderList, normalizeClass, withModifiers, toDisplayString } from "vue";
|
||||
var index = /* @__PURE__ */ (() => '.layui-carousel{position:relative;left:0;top:0;background-color:#f8f8f8}.layui-carousel>[carousel-item]{position:relative;width:100%;height:100%;overflow:hidden}.layui-carousel>[carousel-item]:before{position:absolute;content:"\\e63d";left:50%;top:50%;width:100px;line-height:20px;margin:-10px 0 0 -50px;text-align:center;color:var(--global-neutral-color-8);font-family:layui-icon!important;font-size:30px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-carousel>[carousel-item]>*{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#f8f8f8;transition-duration:.3s;-webkit-transition-duration:.3s;overflow:hidden;visibility:hidden}.layui-carousel-updown>*{-webkit-transition:.3s ease-in-out up;transition:.3s ease-in-out up}.layui-carousel-arrow{display:none\\ ;opacity:0;position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;border:0;border-radius:50%;background-color:#0003;color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;cursor:pointer}.layui-carousel-arrow[lay-type=add]{left:auto!important;right:10px}.layui-carousel:hover .layui-carousel-arrow[lay-type=add],.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add]{right:20px}.layui-carousel[lay-arrow=always] .layui-carousel-arrow{opacity:1;left:20px}.layui-carousel[lay-arrow=none] .layui-carousel-arrow{display:none}.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:#00000059}.layui-carousel:hover .layui-carousel-arrow{display:block\\ ;opacity:1;left:20px}.layui-carousel-ind{position:relative;top:-35px;width:100%;line-height:0!important;text-align:center;font-size:0}.layui-carousel[lay-indicator=outside]{margin-bottom:30px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind{top:10px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:#00000080}.layui-carousel[lay-indicator=none] .layui-carousel-ind{display:none}.layui-carousel-ind ul{display:inline-block;padding:5px;background-color:#0003;border-radius:10px;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li{display:inline-block;width:10px;height:10px;margin:0 3px;font-size:14px;background-color:var(--global-neutral-color-3);background-color:#ffffff80;border-radius:50%;cursor:pointer;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li:hover{background-color:#ffffffb3}.layui-carousel-ind li.layui-this{background-color:#fff}.layui-carousel>[carousel-item]>.layui-carousel-next,.layui-carousel>[carousel-item]>.layui-carousel-prev,.layui-carousel>[carousel-item]>.layui-this{display:block}.layui-carousel>[carousel-item]>.layui-this{left:0}.layui-carousel>[carousel-item]>.layui-carousel-prev{left:-100%}.layui-carousel>[carousel-item]>.layui-carousel-next{left:100%}.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right{left:0}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left{left:-100%}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right{left:100%}.layui-carousel[lay-anim=updown] .layui-carousel-arrow{left:50%!important;top:20px;margin:0 0 0 -18px}.layui-carousel[lay-anim=updown]>[carousel-item]>*,.layui-carousel[lay-anim=fade]>[carousel-item]>*{left:0!important}.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add]{top:auto!important;bottom:20px}.layui-carousel[lay-anim=updown] .layui-carousel-ind{position:absolute;top:50%;right:20px;width:auto;height:auto;transform:translateY(-50%)}.layui-carousel[lay-anim=updown] .layui-carousel-ind ul{padding:3px 5px}.layui-carousel[lay-anim=updown] .layui-carousel-ind li{display:block;margin:6px 0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next{top:100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right{top:100%}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev{opacity:0}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right{opacity:1}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right{opacity:0}\n')();
|
||||
const _hoisted_1$1 = ["data-id"];
|
||||
const __default__$1 = {
|
||||
name: "LayCarouselItem"
|
||||
};
|
||||
const _sfc_main$1 = defineComponent({
|
||||
...__default__$1,
|
||||
props: {
|
||||
id: null
|
||||
},
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const active = inject("active");
|
||||
const slotsChange = inject("slotsChange");
|
||||
slotsChange.value = !slotsChange.value;
|
||||
const anim = inject("anim");
|
||||
const item = ref();
|
||||
const getStyle = computed(() => {
|
||||
if (item.value) {
|
||||
let allChild = item.value.parentNode.children;
|
||||
let allChildNum = allChild.length;
|
||||
let activeIndex = 0;
|
||||
let currentIndex = 0;
|
||||
for (let index2 = 0; index2 < allChild.length; index2++) {
|
||||
const element = allChild[index2];
|
||||
if (element.getAttribute("data-id") === active.value) {
|
||||
activeIndex = index2;
|
||||
}
|
||||
if (element.getAttribute("data-id") === props.id) {
|
||||
currentIndex = index2;
|
||||
}
|
||||
}
|
||||
let prevIndex = activeIndex > 0 ? activeIndex - 1 : allChildNum - 1;
|
||||
let nextIndex = activeIndex + 1 < allChildNum ? activeIndex + 1 : 0;
|
||||
let animation = anim.value;
|
||||
if (activeIndex === currentIndex) {
|
||||
if (animation === "updown") {
|
||||
return {
|
||||
transform: "translateY(0)",
|
||||
visibility: "inherit"
|
||||
};
|
||||
} else if (animation.includes("fade")) {
|
||||
return {
|
||||
opacity: 1,
|
||||
visibility: "inherit"
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
transform: "translateX(0)",
|
||||
visibility: "inherit"
|
||||
};
|
||||
}
|
||||
}
|
||||
if (prevIndex === currentIndex) {
|
||||
if (animation === "updown") {
|
||||
return {
|
||||
transform: "translateY(-100%)"
|
||||
};
|
||||
} else if (animation.includes("fade")) {
|
||||
return {
|
||||
opacity: 0
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
transform: "translateX(-100%)"
|
||||
};
|
||||
}
|
||||
}
|
||||
if (nextIndex === currentIndex) {
|
||||
if (animation === "updown") {
|
||||
return {
|
||||
transform: "translateY(100%)"
|
||||
};
|
||||
} else if (animation.includes("fade")) {
|
||||
return {
|
||||
opacity: 0
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
transform: "translateX(100%)"
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
display: "none"
|
||||
};
|
||||
}
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("li", {
|
||||
ref_key: "item",
|
||||
ref: item,
|
||||
style: normalizeStyle(unref(getStyle)),
|
||||
"data-id": __props.id
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
], 12, _hoisted_1$1);
|
||||
};
|
||||
}
|
||||
});
|
||||
const _hoisted_1 = ["lay-anim", "lay-indicator", "lay-arrow"];
|
||||
const _hoisted_2 = { "carousel-item": "" };
|
||||
const _hoisted_3 = { class: "layui-carousel-ind" };
|
||||
const _hoisted_4 = ["onClick"];
|
||||
const __default__ = {
|
||||
name: "LayCarousel"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
width: { default: "100%" },
|
||||
height: { default: "280px" },
|
||||
modelValue: null,
|
||||
autoplay: { type: Boolean, default: true },
|
||||
arrow: { default: "hover" },
|
||||
anim: { default: "default" },
|
||||
indicator: { default: "inside" },
|
||||
pauseOnHover: { type: Boolean, default: true },
|
||||
interval: { default: 3e3 }
|
||||
},
|
||||
emits: ["update:modelValue", "change"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const slot = useSlots();
|
||||
const slots = slot.default && slot.default();
|
||||
const active = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
});
|
||||
const anim = computed(() => props.anim);
|
||||
const change = function(id) {
|
||||
emit("change", id);
|
||||
active.value = id;
|
||||
};
|
||||
const childrens = ref([]);
|
||||
const slotsChange = ref(true);
|
||||
const setItemInstanceBySlot = function(nodes) {
|
||||
const showNodes = nodes == null ? void 0 : nodes.filter((item) => {
|
||||
return item.children != "v-if";
|
||||
});
|
||||
showNodes == null ? void 0 : showNodes.map((item) => {
|
||||
let component2 = item.type;
|
||||
if (component2.name != _sfc_main$1.name) {
|
||||
setItemInstanceBySlot(item.children);
|
||||
} else {
|
||||
childrens.value.push(item);
|
||||
}
|
||||
});
|
||||
};
|
||||
watch(slotsChange, () => {
|
||||
childrens.value = [];
|
||||
setItemInstanceBySlot(slot.default && slot.default());
|
||||
}, { immediate: true, deep: true });
|
||||
const sub = () => {
|
||||
var _a, _b, _c;
|
||||
for (var i = 0; i < childrens.value.length; i++) {
|
||||
if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
|
||||
if (i === 0) {
|
||||
active.value = (_b = childrens.value[slots.length - 1].props) == null ? void 0 : _b.id;
|
||||
} else {
|
||||
active.value = (_c = childrens.value[i - 1].props) == null ? void 0 : _c.id;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const add = () => {
|
||||
var _a, _b, _c;
|
||||
for (var i = 0; i < childrens.value.length; i++) {
|
||||
if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
|
||||
if (i === childrens.value.length - 1) {
|
||||
active.value = (_b = childrens.value[0].props) == null ? void 0 : _b.id;
|
||||
} else {
|
||||
active.value = (_c = childrens.value[i + 1].props) == null ? void 0 : _c.id;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const autoplay = () => {
|
||||
var _a, _b, _c;
|
||||
for (var i = 0; i < childrens.value.length; i++) {
|
||||
if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
|
||||
if (i === childrens.value.length - 1) {
|
||||
active.value = (_b = childrens.value[0].props) == null ? void 0 : _b.id;
|
||||
} else {
|
||||
active.value = (_c = childrens.value[i + 1].props) == null ? void 0 : _c.id;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
let intervalTimer = 0;
|
||||
const cleanIntervalTimer = () => {
|
||||
if (intervalTimer) {
|
||||
window.clearInterval(intervalTimer);
|
||||
intervalTimer = 0;
|
||||
}
|
||||
};
|
||||
const handleMouseEnter = () => {
|
||||
if (props.autoplay && props.pauseOnHover) {
|
||||
cleanIntervalTimer();
|
||||
}
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
if (props.autoplay && props.pauseOnHover) {
|
||||
intervalTimer = window.setInterval(autoplay, props.interval);
|
||||
}
|
||||
};
|
||||
watch(() => props.autoplay, () => {
|
||||
if (props.autoplay) {
|
||||
intervalTimer = window.setInterval(autoplay, props.interval);
|
||||
}
|
||||
}, { immediate: true });
|
||||
provide("active", active);
|
||||
provide("slotsChange", slotsChange);
|
||||
provide("anim", anim);
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
class: "layui-carousel",
|
||||
"lay-anim": unref(anim),
|
||||
"lay-indicator": __props.indicator,
|
||||
"lay-arrow": __props.arrow,
|
||||
style: normalizeStyle({ width: __props.width, height: __props.height }),
|
||||
onMouseenter: handleMouseEnter,
|
||||
onMouseleave: handleMouseLeave
|
||||
}, [
|
||||
createElementVNode("div", _hoisted_2, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]),
|
||||
createElementVNode("div", _hoisted_3, [
|
||||
createElementVNode("ul", null, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(childrens.value, (ss, index2) => {
|
||||
var _a;
|
||||
return openBlock(), createElementBlock("li", {
|
||||
key: index2,
|
||||
class: normalizeClass([((_a = ss.props) == null ? void 0 : _a.id) === unref(active) ? "layui-this" : ""]),
|
||||
onClick: withModifiers(($event) => {
|
||||
var _a2;
|
||||
return change((_a2 = ss.props) == null ? void 0 : _a2.id);
|
||||
}, ["stop"])
|
||||
}, null, 10, _hoisted_4);
|
||||
}), 128))
|
||||
])
|
||||
]),
|
||||
createElementVNode("button", {
|
||||
class: "layui-icon layui-carousel-arrow",
|
||||
"lay-type": "sub",
|
||||
onClick: sub
|
||||
}, toDisplayString(unref(anim) === "updown" ? "\uE619" : "\uE603"), 1),
|
||||
createElementVNode("button", {
|
||||
class: "layui-icon layui-carousel-arrow",
|
||||
"lay-type": "add",
|
||||
onClick: add
|
||||
}, toDisplayString(unref(anim) === "updown" ? "\uE61A" : "\uE602"), 1)
|
||||
], 44, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { _sfc_main$1 as _, _sfc_main as a, component as c };
|
||||
Reference in New Issue
Block a user