漫游式引导 Tour

Arco 没有对应组件，卡片外壳按 Popover 风格，遮罩使用 Arco 色彩。 属性用法见 Element Plus 文档。

多步引导

点击 Start tour 后定位到示例按钮；目标在挂载后可用。

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { ButtonInstance } from 'element-plus'
const create = ref<ButtonInstance>()
const publish = ref<ButtonInstance>()
const open = ref(false)
// The target buttons only exist after mount, so enable the tour then.
const ready = ref(false)
onMounted(() => { ready.value = true })
</script>

<template>
  <el-button type="primary" :disabled="!ready" @click="open = true">Start tour</el-button>
  <el-button ref="create">Create</el-button>
  <el-button ref="publish">Publish</el-button>
  <el-tour v-model="open">
    <el-tour-step :target="() => create?.$el" title="Create a project" description="Start a new project here." />
    <el-tour-step :target="() => publish?.$el" title="Publish" description="Share the project when it is ready." />
  </el-tour>
</template>

主色卡片

type="primary" 没有 Arco 对应项，保留 Element Plus 形态。

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { ButtonInstance } from 'element-plus'
const target = ref<ButtonInstance>()
const open = ref(false)
// The target button only exists after mount, so enable the tour then.
const ready = ref(false)
onMounted(() => { ready.value = true })
</script>

<template>
  <el-button ref="target" type="primary" :disabled="!ready" @click="open = true">Start primary tour</el-button>
  <el-tour v-model="open" type="primary">
    <el-tour-step :target="() => target?.$el" title="Primary tour" description="A primary-colored card." />
  </el-tour>
</template>

与 Arco 的差异

• 步骤、定位和交互保留 Element Plus 行为。
• primary 形态保留 Element Plus 的主色卡片。