skills.rest
wepn13232
wepn13232COMMUNITY
Explore all skills by this author →
GitHub

element-plus-tour

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
One-click install
npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-tour
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
wepn13232wepn13232
7

element-plus-tree

Provides el-tree API reference for Vue developers including props, events, and slots.

Community
Basic
ricardocidalericardocidale

Guided Tour / Walkthrough

Guide new users through an application interface with step-by-step interactive tours.

Community
Intermediate
wepn13232wepn13232
7

element-plus-popover

Summarize Element Plus el-popover attributes, slots, events, and exposes.

Community
Basic
trusted-americantrusted-american

ember-shepherd-tours

Create guided onboarding tours for Ember.js applications using shepherd.js.

Official
Advanced