✨(component): ✨(component): 新增轮播图支持过渡动画，默认为滑动,修复autoplay为false时仍自动播放问题
ISSUES CLOSED: #I50UP9
This commit is contained in:
0o张不歪o0
parent
0a39191913
commit
63bf7d0c69
@ -38,6 +38,7 @@
|
||||
background-color: #f8f8f8;
|
||||
transition-duration: 0.3s;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-carousel-updown > * {
|
||||
@ -205,6 +206,7 @@
|
||||
right: 20px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.layui-carousel[lay-anim="updown"] .layui-carousel-ind ul {
|
||||
|
||||
@ -53,6 +53,15 @@ const active = computed({
|
||||
},
|
||||
});
|
||||
|
||||
const anim = computed({
|
||||
get() {
|
||||
return props.anim;
|
||||
},
|
||||
set() {
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const change = function (id: any) {
|
||||
@ -85,6 +94,7 @@ watch(
|
||||
|
||||
provide("active", active);
|
||||
provide("slotsChange", slotsChange);
|
||||
provide("anim", anim);
|
||||
|
||||
const sub = () => {
|
||||
for (var i = 0; i < childrens.value.length; i++) {
|
||||
@ -128,6 +138,7 @@ const autoplay = () => {
|
||||
watch(
|
||||
() => props.autoplay,
|
||||
() => {
|
||||
if(props.autoplay)
|
||||
setInterval(autoplay, props.interval);
|
||||
},
|
||||
{ immediate: true }
|
||||
|
||||
@ -5,7 +5,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, Ref } from "vue";
|
||||
import { inject, Ref, computed, ref, VNodeChild } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
@ -14,10 +14,90 @@ const props = defineProps<{
|
||||
const active = inject("active");
|
||||
const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;
|
||||
slotsChange.value = !slotsChange.value;
|
||||
|
||||
const anim = inject("anim");
|
||||
const item = ref();
|
||||
const getStyle = computed<any>(() => {
|
||||
if (item.value) {
|
||||
let allChild = item.value.parentNode.children;
|
||||
let allChildNum = allChild.length;
|
||||
|
||||
//当前的activeIndex
|
||||
let activeIndex,
|
||||
currentIndex = 0;
|
||||
for (let index = 0; index < allChild.length; index++) {
|
||||
const element = allChild[index];
|
||||
// @ts-ignore
|
||||
if (element.__vnode.props["data-id"] === active.value) {
|
||||
activeIndex = index;
|
||||
}
|
||||
if (element.__vnode.props["data-id"] === props.id) {
|
||||
currentIndex = index;
|
||||
}
|
||||
}
|
||||
// @ts-ignore
|
||||
let prevIndex = activeIndex > 0 ? activeIndex - 1 : allChildNum - 1;
|
||||
// @ts-ignore
|
||||
let nextIndex = activeIndex + 1 < allChildNum ? activeIndex + 1 : 0;
|
||||
// @ts-ignore
|
||||
let animation = anim.value;
|
||||
//状态 上一个 当前 下一个
|
||||
if (activeIndex === currentIndex) {
|
||||
if (animation === "updown") {
|
||||
return {
|
||||
transform: "translateY(0)",
|
||||
};
|
||||
} else if (animation.includes("fade")) {
|
||||
return {
|
||||
opacity: 1,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
transform: "translateX(0)",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
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",
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li v-if="active === id">
|
||||
<li ref="item" :style="getStyle" :data-id="id">
|
||||
<slot></slot>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@ -9,16 +9,16 @@
|
||||
<template>
|
||||
<lay-carousel v-model="active1">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="2">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#5FB878;">条目二</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="3">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FFB800;">条目三</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="4">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</template>
|
||||
@ -40,26 +40,56 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 不同方向
|
||||
::: title 不同方向与不同切换动画
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `anim` 属性来控制切换的放向与动画，支持 `default`左右切换(默认)、`updown`上线切换、`fade`渐隐渐显切换
|
||||
|
||||
<template>
|
||||
<lay-carousel v-model="active2" anim="updown">
|
||||
<div style="display:flex;justify-content: space-around;flex-wrap:wrap">
|
||||
<lay-carousel v-model="activeAnmi1" anim="updown" style="display:inline-block;width:32%" :autoplay="true">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="2">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#5FB878;">条目二</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="3">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FFB800;">条目三</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="4">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
<lay-carousel v-model="activeAnmi2" style="width:32%">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="2">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#5FB878;">条目二</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="3">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FFB800;">条目三</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="4">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
<lay-carousel v-model="activeAnmi3" anim="fade" style="width:32%;">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="2">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#5FB878;">条目二</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="3">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FFB800;">条目三</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="4">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -67,11 +97,11 @@ import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const active2 = ref("1")
|
||||
|
||||
const activeAnmi1 = ref("1")
|
||||
const activeAnmi2 = ref("1")
|
||||
const activeAnmi3 = ref("1")
|
||||
return {
|
||||
active2
|
||||
activeAnmi1,activeAnmi2,activeAnmi3,activeAnmi4
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,7 +109,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 控制位置
|
||||
::: title 控制器位置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
@ -87,16 +117,16 @@ export default {
|
||||
<template>
|
||||
<lay-carousel v-model="active3" indicator="outside">
|
||||
<lay-carousel-item id="1">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#009688;">条目一</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="2">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#5FB878;">条目二</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="3">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FFB800;">条目三</div>
|
||||
</lay-carousel-item>
|
||||
<lay-carousel-item id="4">
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
|
||||
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FF5722;">条目四</div>
|
||||
</lay-carousel-item>
|
||||
</lay-carousel>
|
||||
</template>
|
||||
@ -140,10 +170,10 @@ export default {
|
||||
const active4 = ref("1")
|
||||
|
||||
const arrays = ref([
|
||||
{id: "1", text: ""},
|
||||
{id: "2", text: ""},
|
||||
{id: "3", text: ""},
|
||||
{id: "4", text: ""}
|
||||
{id: "1", text: "1️⃣"},
|
||||
{id: "2", text: "2️⃣"},
|
||||
{id: "3", text: "3️⃣"},
|
||||
{id: "4", text: "4️⃣"}
|
||||
])
|
||||
|
||||
return {
|
||||
@ -165,7 +195,7 @@ export default {
|
||||
| 属性 | 描述 | 类型 |类型 |可选值 |
|
||||
| --------- | ------------ |--------------| --------------- | -------------------------|
|
||||
| v-model | 当前激活项 | `number` | -- | -- |
|
||||
| anim | 切换方向 | `string` | `default` | `default` `updown` |
|
||||
| anim | 切换方向 | `string` | `default` | `default` `updown` `fade` |
|
||||
| indicator | 控制器位置 | `string` | `inside` |`inside` `outside` `none` |
|
||||
| arrow | 切换按钮状态 | `string` | `hover` |`hover` `always` `none` |
|
||||
| autoplay | 自动播放 | `boolean` | `true` | `true` `false` |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user