当前位置：首页 > news >正文

element-plus中，Tour 漫游式引导组件的使用

news 来源：原创 2025/6/10 13:14:07

一.Tour 漫游式引导组件的简单介绍

1.作用

2.基本使用

3.展示效果

二.实战1：介绍患者病历表单

1.要求

2.实现步骤

3.展示效果

结语

一.Tour 漫游式引导组件的简单介绍

1.作用

快速了解一个功能/产品。

2.基本使用

从官网复制如下代码：

<template>
    <!-- 该按钮通过改变自定义变量open的值，来控制漫游式引导组件的显示/关闭 -->
    <el-button type="primary" @click="open = true">Begin Tour</el-button>

    <el-divider />


    <!-- 需要漫游式引导介绍的三个按钮 -->
    <el-button ref="ref1">Upload</el-button>
    <el-button ref="ref2" type="primary">Save</el-button>
    <el-button ref="ref3" :icon="MoreFilled" />


    <!-- 漫游式引导组件，v-model控制着显示/关闭 -->
    <el-tour v-model="open">
      <!-- el-tour-step表示一个步骤 -->
      <el-tour-step :target="ref1?.$el" title="Upload File">
        <img
          style="width: 240px"
          src="https://element-plus.org/images/element-plus-logo.svg"
          alt="tour.png"
        />
        <div>Put you files here.</div>
      </el-tour-step>
      <el-tour-step
        :target="ref2?.$el"
        title="Save"
        description="Save your changes"
      />
      <el-tour-step
        :target="ref3?.$el"
        title="Other Actions"
        description="Click to see other"
      />
    </el-tour>

</template>

<script setup>
import { ref } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'

//这是漫游式引导所需的变量
const ref1 = ref(null)
const ref2 = ref(null)
const ref3 = ref(null)
const open = ref(false)

</script>


<style scoped>


</style>

3.展示效果

二.实战1：介绍患者病历表单

1.要求

2.实现步骤

①定义漫游式组件所需的变量

//漫游式引导所需的变量
const ref1 = ref()//用来介绍患者表单
const ref2 = ref()//用来介绍【暂存按钮】
const ref3 = ref()//用来介绍【提交按钮】
const ref4 = ref()//用来介绍【清屏按钮】
const open = ref(false)//用来控制漫游式组件是否展示

②编写漫游式组件el-tour

<!-- 漫游式引导组件 -->
<el-tour v-model="open">
    <!-- 介绍患者表单 -->
    <el-tour-step :target="ref1?.$el" title="填写患者病历">
    <div>医生通过和患者沟通，将初步诊断填写到病历中</div>
    </el-tour-step>
    <!-- 介绍【暂存按钮】 -->
    <el-tour-step
    :target="ref2?.$el"
    title="暂存患者病历"
    description="若患者须进行检查/检验，则先暂存其病历"
    />
    <!-- 介绍【提交按钮】 -->
    <el-tour-step
    :target="ref3?.$el"
    title="提交患者病历"
    description="若患者无须进行检查/检验，则直接提交其病历"
    />
    <!-- 介绍【清屏按钮】 -->
    <el-tour-step
    :target="ref4?.$el"
    title="清空病历表单"
    description="暂存/提交病历前，可以一键清空输入"
    />
</el-tour>

③给需要介绍的表单、三个按钮，分别加上ref属性