目錄

一.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 漫游式引導組件的使用。

喜歡本篇文章的話，可以留個免費的關注~~