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

目录

一.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"><imgstyle="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属性

  

 ④给那个问号图标，写一个点击函数，令自定义属性open为true（展示漫游组件）即可。

3.展示效果

结语

以上就是element-plus中，Tour 漫游式引导组件的使用。

喜欢本篇文章的话，可以留个免费的关注~~