el-tour详解

el-tour 是 Element Plus 框架中的漫游式引导组件，用于引导用户了解应用的各项功能。它常用于新用户引导、功能介绍等场景。

el-tour 属性详解

1. steps:

   • 类型: Array<Object>
   • 用途: 引导步骤的配置数组。
   • 默认值: []

2. current:

   • 类型: Number
   • 用途: 当前激活的步骤索引。
   • 默认值: 0

3. transition:

   • 类型: String
   • 用途: 过渡动画的名称。
   • 默认值: el-fade-in-linear

4. transition-duration:

   • 类型: Number
   • 用途: 过渡动画的持续时间（毫秒）。
   • 默认值: 300

5. close-on-mask-click:

   • 类型: Boolean
   • 用途: 是否点击遮罩层关闭引导。
   • 默认值: true

6. close-on-dialog-click:

   • 类型: Boolean
   • 用途: 是否点击对话框关闭引导。
   • 默认值: false

7. close-on-trap-keydown:

   • 类型: Boolean
   • 用途: 是否按下 Esc 键关闭引导。
   • 默认值: true

8. auto-start:

   • 类型: Boolean
   • 用途: 是否自动开始引导。
   • 默认值: false

el-tour 事件详解

1. update:current:

   • 事件名称: update:current
   • 用途: 当当前步骤索引发生变化时触发。
   • 参数: 新的当前步骤索引。

2. next:

   • 事件名称: next
   • 用途: 当用户点击“下一步”按钮时触发。
   • 参数: 无

3. prev:

   • 事件名称: prev
   • 用途: 当用户点击“上一步”按钮时触发。
   • 参数: 无

4. finish:

   • 事件名称: finish
   • 用途: 当引导结束时触发。
   • 参数: 无

el-tour 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义引导对话框的内容。

完整示例代码

<template>
  <div>
    <h2>Tour 漫游式引导示例</h2>

    <!-- 启动按钮 -->
    <el-button @click="startTour">启动引导</el-button>

    <!-- 漫游式引导组件 -->
    <el-tour
      :steps="steps"
      :current="currentStep"
      @update:current="updateCurrentStep"
      @finish="handleFinish"
    ></el-tour>

    <!-- 页面元素 -->
    <el-button id="step1">第一步按钮</el-button>
    <el-button id="step2">第二步按钮</el-button>
    <el-button id="step3">第三步按钮</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElButton, ElTour } from 'element-plus'

const currentStep = ref(0)

const steps = [
  {
    target: '#step1',
    content: '这是第一步按钮，点击它可以执行某些操作。',
    placement: 'right'
  },
  {
    target: '#step2',
    content: '这是第二步按钮，点击它可以执行其他操作。',
    placement: 'bottom'
  },
  {
    target: '#step3',
    content: '这是第三步按钮，点击它可以完成所有操作。',
    placement: 'left'
  }
]

const startTour = () => {
  currentStep.value = 0
}

const updateCurrentStep = (newIndex) => {
  currentStep.value = newIndex
}

const handleFinish = () => {
  console.log('引导结束')
}
</script>

代码解释

1. 启动按钮:

   • 使用 el-button 组件创建一个启动按钮，点击按钮时调用 startTour 方法。

   • <el-button @click="startTour">启动引导</el-button>
     

2. 漫游式引导组件:

   • 使用 el-tour 组件并设置 steps 和 current 属性，绑定相关事件。

   • <el-tour
       :steps="steps"
       :current="currentStep"
       @update:current="updateCurrentStep"
       @finish="handleFinish"
     ></el-tour>
     

3. 页面元素:

   • 在页面中添加一些按钮，这些按钮将作为引导的目标元素。

   • <el-button id="step1">第一步按钮</el-button>
     <el-button id="step2">第二步按钮</el-button>
     <el-button id="step3">第三步按钮</el-button>
     

4. 步骤配置:

   • 定义 steps 数组，每个步骤包含目标元素的选择器、内容和位置。

   • const steps = [
       {
         target: '#step1',
         content: '这是第一步按钮，点击它可以执行某些操作。',
         placement: 'right'
       },
       {
         target: '#step2',
         content: '这是第二步按钮，点击它可以执行其他操作。',
         placement: 'bottom'
       },
       {
         target: '#step3',
         content: '这是第三步按钮，点击它可以完成所有操作。',
         placement: 'left'
       }
     ]
     

5. 启动引导:

   • 定义 startTour 方法，设置当前步骤为初始值。

   • const startTour = () => {
       currentStep.value = 0
     }
     

6. 更新当前步骤:

   • 定义 updateCurrentStep 方法，更新当前步骤索引。

   • const updateCurrentStep = (newIndex) => {
       currentStep.value = newIndex
     }
     

7. 处理引导结束:

   • 定义 handleFinish 方法，处理引导结束时的逻辑。

   • const handleFinish = () => {
       console.log('引导结束')
     }
     

自定义样式

• 自定义按钮样式:

  • 使用 <style scoped> 自定义按钮的样式。

  • .el-button {
      margin: 10px;
    }