154 lines
3.9 KiB
Vue
154 lines
3.9 KiB
Vue
<script setup>
|
|
import { computed, ref } from "vue"
|
|
import {
|
|
NButton,
|
|
NCard,
|
|
NSpace,
|
|
NTag
|
|
} from "naive-ui"
|
|
import { useFloating } from "./composables/useFloating"
|
|
|
|
const props = defineProps({
|
|
step: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isFirst: Boolean,
|
|
isLast: Boolean,
|
|
target: {
|
|
type: [HTMLElement, String, Object],
|
|
default: null
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
"next",
|
|
"previous",
|
|
"finish",
|
|
"close"
|
|
])
|
|
|
|
const floating = ref(null)
|
|
|
|
const {
|
|
x,
|
|
y,
|
|
strategy
|
|
} = useFloating(
|
|
() => props.target,
|
|
floating
|
|
)
|
|
|
|
const style = computed(() => ({
|
|
position: strategy.value,
|
|
left: `${x.value}px`,
|
|
top: `${y.value}px`,
|
|
zIndex: 9999
|
|
}))
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="tour-tooltip">
|
|
<div
|
|
ref="floating"
|
|
v-if="visible && step"
|
|
class="tour-tooltip"
|
|
:style="style"
|
|
>
|
|
<NCard
|
|
style="width:320px"
|
|
size="small"
|
|
>
|
|
<template #header>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-semibold">
|
|
{{ step.title }}
|
|
</span>
|
|
|
|
<NTag
|
|
v-if="step.tag"
|
|
size="small"
|
|
>
|
|
{{ step.tag }}
|
|
</NTag>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="text-sm whitespace-pre-line">
|
|
{{ step.description }}
|
|
</div>
|
|
|
|
<slot />
|
|
|
|
<template #footer>
|
|
<NSpace justify="space-between">
|
|
<div>
|
|
<NButton
|
|
quaternary
|
|
size="small"
|
|
@click="emit('close')"
|
|
>
|
|
Пропустить
|
|
</NButton>
|
|
</div>
|
|
|
|
<NSpace>
|
|
<NButton
|
|
v-if="!isFirst"
|
|
size="small"
|
|
@click="emit('previous')"
|
|
>
|
|
Назад
|
|
</NButton>
|
|
|
|
<NButton
|
|
v-if="!isLast"
|
|
type="primary"
|
|
size="small"
|
|
:disabled="step.manual"
|
|
@click="emit('next')"
|
|
>
|
|
Далее
|
|
</NButton>
|
|
|
|
<NButton
|
|
v-else
|
|
type="primary"
|
|
size="small"
|
|
@click="emit('finish')"
|
|
>
|
|
Завершить
|
|
</NButton>
|
|
</NSpace>
|
|
</NSpace>
|
|
</template>
|
|
</NCard>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.tour-tooltip {
|
|
transition:
|
|
left .18s,
|
|
top .18s;
|
|
}
|
|
|
|
.tour-tooltip-enter-active,
|
|
.tour-tooltip-leave-active {
|
|
transition: .18s;
|
|
}
|
|
|
|
.tour-tooltip-enter-from,
|
|
.tour-tooltip-leave-to {
|
|
opacity:0;
|
|
transform:translateY(6px);
|
|
}
|
|
|
|
</style> |