element-plus-tour

Name: element-plus-tour
Availability: InStock
Author: wepn13232

Document Element Plus Tour component attributes and step behaviors for Vue developers.

7|Updated Mar 31, 2026

Search Tags:#vue #api-reference #element-plus #component-guidance #el-tour #tour-component

Ready to run

npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-tour

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: element-plus-tour
Source: https://github.com/wepn13232/element-plus-skills/tree/main/tour
Command: npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-tour

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a concise API reference for the Element Plus Tour component so developers can configure guided walkthroughs without hunting through scattered documentation.

Core Features & Use Cases

Attribute reference: Lists every Tour prop from append-to through target-area-clickable so you know how to control positioning, masking, and navigation behaviors.
TourStep guidance: Details the per-step options like target selection, placement, mask control, and custom buttons to fine-tune each stage of a walkthrough.
Use Case: While designing an onboarding tour, consult this skill to align your steps with the official API, ensuring masks, arrows, and z-index behave as expected.

Quick Start

Ask the skill for the el-tour attributes and usage tips to configure a guided walkthrough.

Frequently Asked Questions about element-plus-tour

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I configure Element Plus tour components for an interactive onboarding walkthrough?▼

Configuring an Element Plus tour involves setting attributes like model-value and current step to manage progression, then defining each TourStep with target selection, placement, and mask controls. This skill surfaces those exact API details to speed up walkthrough setup.

What props control the mask and z-index behavior in el-tour?▼

The el-tour component provides mask options and z-index attributes to control layering and overlay behavior during a walkthrough. You use these props alongside placement and navigation button settings to ensure the guided tour visually isolates the correct target areas.

How do I set up custom navigation buttons for each step in an Element Plus tour?▼

You set up custom navigation buttons using the TourStep options, which allow you to fine-tune each stage of the walkthrough individually. This skill documents the per-step configuration needed to align your custom buttons with the official Element Plus API.

Can I use el-tour to target specific DOM elements for guided onboarding in Vue?▼

Yes, el-tour uses the target selection attribute within TourStep options to point at specific DOM elements for your guided onboarding. This skill details how to align target selection with placement and mask controls to build accurate Vue walkthroughs.

What is the best way to manage placement and target-area-clickable settings in Element Plus tours?▼

The best way to manage placement and target-area-clickable settings is to reference the full attribute list from append-to through target-area-clickable provided here. This ensures your mask controls and step behaviors match the official Element Plus API expectations.