Arco has no equivalent; tour cards use the Popover style and Arco mask colors. See the Element Plus docs for props.
Start the tour to highlight the example buttons; targets become available after mounting.
<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>Primary has no Arco equivalent and retains the Element Plus form.
<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>