61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template>
|
|
<div class="mb-37px">
|
|
<Message
|
|
:type="currentMsg.type"
|
|
:file="currentMsg.fileInfo"
|
|
:text="currentMsg.text"
|
|
:loading="currentMsg.loading"
|
|
:inversion="currentMsg.inversion"
|
|
></Message>
|
|
<div
|
|
class="flex items-center text-22px mt-20px ml-70px"
|
|
v-if="messageLength > 1"
|
|
>
|
|
<SvgIcon
|
|
@click="handlePrev"
|
|
name="arrow-right"
|
|
class="text-white cursor-pointer text-22px transform rotate-180"
|
|
></SvgIcon>
|
|
<div class="px-20px">{{ currentIndex + 1 }} / {{ messageLength }}</div>
|
|
<SvgIcon
|
|
@click="handleNext"
|
|
name="arrow-right"
|
|
class="text-white text-22px cursor-pointer"
|
|
></SvgIcon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Message from './message.vue'
|
|
import { ref, computed ,watch} from 'vue'
|
|
|
|
const props = defineProps({
|
|
arr: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const currentMsg = computed(() => props.arr[currentIndex.value])
|
|
const currentIndex = ref(props.arr.length-1)
|
|
const messageLength = computed(() => props.arr.length)
|
|
|
|
const handleNext = () => {
|
|
if (currentIndex.value < messageLength.value - 1) {
|
|
currentIndex.value++
|
|
}
|
|
}
|
|
const handlePrev = () => {
|
|
if (currentIndex.value > 0) {
|
|
currentIndex.value--
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.arr.length,
|
|
() => {
|
|
currentIndex.value = props.arr.length - 1
|
|
}
|
|
)
|
|
</script>
|