Tour 漫游式引导

import { Tour } from "@reglow/reui";
import type { TourStep } from "@reglow/reui";

<script setup lang="ts">
import { ref } from "vue";
import { Tour } from "@reglow/reui";
import { Button } from "@reglow/reui";
import type { TourStep } from "@reglow/reui";

const open = ref(false);
const btnRef1 = ref<InstanceType<typeof Button> | null>(null);
const btnRef2 = ref<InstanceType<typeof Button> | null>(null);

const steps: TourStep[] = [
  {
    title: "上传文件",
    description: "点击这里上传文件",
    target: () => btnRef1.value?.$el ?? null,
  },
  {
    title: "保存",
    description: "保存你的更改",
    placement: "right",
    target: () => btnRef2.value?.$el ?? null,
  },
];
</script>

<template>
  <Button ref="btnRef1" @click="open = true">开始引导</Button>
  <Button ref="btnRef2">保存</Button>

  <Tour v-model:open="open" :steps="steps" @finish="console.log('done')" />
</template>

<Tour v-model:open="open" :steps="[{ title: '欢迎', description: '欢迎使用本系统', target: () => null }]" />

<Tour v-model:open="open" :steps="steps" :mask="false" type="primary" />

<Tour v-model:open="open" :steps="[
  { title: '右侧', description: '在目标右侧', placement: 'right', target: () => el },
  { title: '上方', description: '在目标上方', placement: 'top', target: () => el },
]" />