|
@@ -1,114 +1,115 @@
|
|
<template>
|
|
<template>
|
|
- <div class="ui-slide" :class="{'stop-animation': stopAmimation}" v-if="items.length">
|
|
|
|
- <Gate :index="extendIndex">
|
|
|
|
- <GateContent v-for="(item, i) in extendItems">
|
|
|
|
- <slot :raw="item" :active="items[index]" :index="getIndex(i)" />
|
|
|
|
- </GateContent>
|
|
|
|
- </Gate>
|
|
|
|
- <template v-if="showCtrl">
|
|
|
|
- <span class="left fun-ctrl" @click="prevHandler"><UIIcon type="left1" /></span>
|
|
|
|
- <span class="right fun-ctrl" @click="nextHandler"><UIIcon type="right" /></span>
|
|
|
|
- </template>
|
|
|
|
- <slot name="attach" :active="items[index]" />
|
|
|
|
|
|
+ <div class="ui-slide" :class="{ 'stop-animation': stopAmimation }" v-if="items.length">
|
|
|
|
+ <Gate :index="extendIndex">
|
|
|
|
+ <GateContent v-for="(item, i) in extendItems">
|
|
|
|
+ <slot :raw="item" :active="items[index]" :index="getIndex(i)" />
|
|
|
|
+ </GateContent>
|
|
|
|
+ </Gate>
|
|
|
|
+ <template v-if="showCtrl">
|
|
|
|
+ <span class="left fun-ctrl" @click="prevHandler"><UIIcon type="left1" /></span>
|
|
|
|
+ <span class="right fun-ctrl" @click="nextHandler"><UIIcon type="right" /></span>
|
|
|
|
+ </template>
|
|
|
|
+ <slot name="attach" :active="items[index]" />
|
|
|
|
|
|
- <span class="infos" v-if="showInfos">
|
|
|
|
- <span class="tj">
|
|
|
|
- <span>{{ index + 1 }}</span> / {{ items.length }}
|
|
|
|
- </span>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <span class="infos" v-if="showInfos">
|
|
|
|
+ <span class="tj">
|
|
|
|
+ <span>{{ index + 1 }}</span> / {{ items.length }}
|
|
|
|
+ </span>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { Gate, GateContent } from '../gate'
|
|
|
|
-import { ref, watchEffect, computed } from 'vue'
|
|
|
|
-import UIIcon from '../icon'
|
|
|
|
-import { nextTick } from 'vue';
|
|
|
|
|
|
+import { Gate, GateContent } from "../gate";
|
|
|
|
+import { ref, watchEffect, computed } from "vue";
|
|
|
|
+import UIIcon from "../icon";
|
|
|
|
+import { nextTick } from "vue";
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
- items: Array,
|
|
|
|
- currentIndex: {
|
|
|
|
- type: Number,
|
|
|
|
- default: 0,
|
|
|
|
- },
|
|
|
|
- showCtrl: {
|
|
|
|
- type: Boolean,
|
|
|
|
- },
|
|
|
|
- showInfos: {
|
|
|
|
- type: Boolean,
|
|
|
|
- },
|
|
|
|
-})
|
|
|
|
-const emit = defineEmits(['change'])
|
|
|
|
-const extendIndex = ref()
|
|
|
|
-const extendLength = computed(() => props.items.length > 1 ? 1 : 0)
|
|
|
|
|
|
+ items: Array,
|
|
|
|
+ currentIndex: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 0,
|
|
|
|
+ },
|
|
|
|
+ showCtrl: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ },
|
|
|
|
+ showInfos: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+const emit = defineEmits(["change"]);
|
|
|
|
+const extendIndex = ref();
|
|
|
|
+// const extendLength = computed(() => (props.items.length > 1 ? 1 : 0));
|
|
|
|
+const extendLength = computed(() => 0);
|
|
const getIndex = (extendIndex) => {
|
|
const getIndex = (extendIndex) => {
|
|
- const len = props.items.length
|
|
|
|
- const diff = extendIndex - extendLength.value
|
|
|
|
|
|
+ const len = props.items.length;
|
|
|
|
+ const diff = extendIndex - extendLength.value;
|
|
|
|
|
|
- if (diff < 0) {
|
|
|
|
- return diff + len
|
|
|
|
- } else if (diff >= len) {
|
|
|
|
- return diff % len
|
|
|
|
- } else {
|
|
|
|
- return diff
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ if (diff < 0) {
|
|
|
|
+ return diff + len;
|
|
|
|
+ } else if (diff >= len) {
|
|
|
|
+ return diff % len;
|
|
|
|
+ } else {
|
|
|
|
+ return diff;
|
|
|
|
+ }
|
|
|
|
+};
|
|
const extendItems = computed(() => {
|
|
const extendItems = computed(() => {
|
|
- if (extendLength.value) {
|
|
|
|
- const reverItems = [...props.items].reverse()
|
|
|
|
- return [
|
|
|
|
- ...reverItems.slice(0, extendLength.value),
|
|
|
|
- ...props.items,
|
|
|
|
- ...props.items.slice(0, extendLength.value)
|
|
|
|
- ]
|
|
|
|
- } else {
|
|
|
|
- return props.items
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
|
|
+ if (extendLength.value) {
|
|
|
|
+ const reverItems = [...props.items].reverse();
|
|
|
|
+ return [
|
|
|
|
+ ...reverItems.slice(0, extendLength.value),
|
|
|
|
+ ...props.items,
|
|
|
|
+ ...props.items.slice(0, extendLength.value),
|
|
|
|
+ ];
|
|
|
|
+ } else {
|
|
|
|
+ return props.items;
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
|
|
-const index = computed(() => getIndex(extendIndex.value))
|
|
|
|
|
|
+const index = computed(() => getIndex(extendIndex.value));
|
|
|
|
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
- extendIndex.value = props.currentIndex + extendLength.value
|
|
|
|
-})
|
|
|
|
|
|
+ extendIndex.value = props.currentIndex + extendLength.value;
|
|
|
|
+});
|
|
|
|
|
|
-const stopAmimation = ref(false)
|
|
|
|
-let prevent = false
|
|
|
|
|
|
+const stopAmimation = ref(false);
|
|
|
|
+let prevent = false;
|
|
const openPrevent = (fn) => {
|
|
const openPrevent = (fn) => {
|
|
- prevent = true
|
|
|
|
- setTimeout(() => {
|
|
|
|
- stopAmimation.value = true
|
|
|
|
- nextTick(() => {
|
|
|
|
- fn()
|
|
|
|
- setTimeout(() => {
|
|
|
|
- stopAmimation.value = false
|
|
|
|
- prevent = false
|
|
|
|
- }, 50)
|
|
|
|
- })
|
|
|
|
- }, 300)
|
|
|
|
-}
|
|
|
|
|
|
+ prevent = true;
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ stopAmimation.value = true;
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ fn();
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ stopAmimation.value = false;
|
|
|
|
+ prevent = false;
|
|
|
|
+ }, 50);
|
|
|
|
+ });
|
|
|
|
+ }, 300);
|
|
|
|
+};
|
|
const prevHandler = () => {
|
|
const prevHandler = () => {
|
|
- if (prevent) return;
|
|
|
|
- if (index.value === 0) {
|
|
|
|
- openPrevent(() => {
|
|
|
|
- extendIndex.value = extendLength.value + props.items.length - 1
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- extendIndex.value--
|
|
|
|
- emit('change', index.value)
|
|
|
|
-}
|
|
|
|
|
|
+ if (prevent) return;
|
|
|
|
+ if (index.value === 0) {
|
|
|
|
+ openPrevent(() => {
|
|
|
|
+ extendIndex.value = extendLength.value + props.items.length - 1;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ extendIndex.value--;
|
|
|
|
+ emit("change", index.value);
|
|
|
|
+};
|
|
const nextHandler = () => {
|
|
const nextHandler = () => {
|
|
- if (prevent) return;
|
|
|
|
- if (index.value === props.items.length - 1) {
|
|
|
|
- openPrevent(() => {
|
|
|
|
- extendIndex.value = extendLength.value
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- extendIndex.value++
|
|
|
|
- emit('change', index.value)
|
|
|
|
-}
|
|
|
|
|
|
+ if (prevent) return;
|
|
|
|
+ if (index.value === props.items.length - 1) {
|
|
|
|
+ openPrevent(() => {
|
|
|
|
+ extendIndex.value = extendLength.value;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ extendIndex.value++;
|
|
|
|
+ emit("change", index.value);
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-export default { name: 'ui-slide' }
|
|
|
|
|
|
+export default { name: "ui-slide" };
|
|
</script>
|
|
</script>
|