twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加基于ElTour实现的漫游式引导 (#958)

Browse Source 
* feat: 添加基于ElTour实现的引导
This commit is contained in:
wzc520pyfm 2024-03-05 22:20:41 +08:00 committed by GitHub
parent ccf3a6f917
commit d83f28dbd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 73 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/style/element-plus.scss
View File

@ -64,7 +64,7 @@
}
}
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
/* 全局覆盖element-plus的el-tour、el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
.el-dialog__headerbtn,
.el-message-box__headerbtn {
&:hover {
@ -75,6 +75,7 @@
}
.el-icon {
&.el-tour__close,
&.el-dialog__close,
&.el-drawer__close,
&.el-message-box__close,

118
src/views/guide/index.vue
View File

@ -1,63 +1,75 @@
<script setup lang="ts">
import { ref } from "vue";
import intro from "intro.js";
import "intro.js/minified/introjs.min.css";
type GuideStep = {
element: string | HTMLElement;
title: string;
intro: string;
position: "left" | "right" | "top" | "bottom";
};
defineOptions({
name: "Guide"
});
const GUIDE_STEPS = [
{
element: document.querySelector(".sidebar-logo-container") as
| string
| HTMLElement,
title: "项目名称和Logo",
intro: "您可以在这里设置项目名称和Logo",
position: "left"
},
{
element: document.querySelector("#header-search") as string | HTMLElement,
title: "搜索菜单",
intro: "您可以在这里搜索想要查看的菜单",
position: "left"
},
{
element: document.querySelector("#header-notice") as string | HTMLElement,
title: "消息通知",
intro: "您可以在这里查看管理员发送的消息",
position: "left"
},
{
element: document.querySelector("#header-translation") as
| string
| HTMLElement,
title: "国际化",
intro: "您可以在这里进行语言切换",
position: "left"
},
{
element: document.querySelector(".set-icon") as string | HTMLElement,
title: "项目配置",
intro: "您可以在这里查看项目配置",
position: "left"
},
{
element: document.querySelector(".tags-view") as string | HTMLElement,
title: "多标签页",
intro: "这里是您访问过的页面的历史",
position: "bottom"
}
] as Partial<GuideStep>[];
const tourOpen = ref(false);
const onGuide = () => {
intro()
.setOptions({
steps: [
{
element: document.querySelector(".sidebar-logo-container") as
| string
| HTMLElement,
title: "项目名称和Logo",
intro: "您可以在这里设置项目名称和Logo",
position: "left"
},
{
element: document.querySelector("#header-search") as
| string
| HTMLElement,
title: "搜索菜单",
intro: "您可以在这里搜索想要查看的菜单",
position: "left"
},
{
element: document.querySelector("#header-notice") as
| string
| HTMLElement,
title: "消息通知",
intro: "您可以在这里查看管理员发送的消息",
position: "left"
},
{
element: document.querySelector("#header-translation") as
| string
| HTMLElement,
title: "国际化",
intro: "您可以在这里进行语言切换",
position: "left"
},
{
element: document.querySelector(".set-icon") as string | HTMLElement,
title: "项目配置",
intro: "您可以在这里查看项目配置",
position: "left"
},
{
element: document.querySelector(".tags-view") as string | HTMLElement,
title: "多标签页",
intro: "这里是您访问过的页面的历史",
position: "bottom"
}
]
steps: GUIDE_STEPS
})
.start();
};
const onTour = () => {
tourOpen.value = true;
};
</script>
<template>
@ -69,6 +81,18 @@ const onGuide = () => {
</span>
</div>
</template>
<el-button @click="onGuide"> 打开引导页 </el-button>
<el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
<el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
<el-tour v-model="tourOpen">
<el-tour-step
v-for="step in GUIDE_STEPS"
:key="step.title"
:target="() => step.element"
:title="step.title"
:description="step.intro"
:placement="step.position"
/>
</el-tour>
</el-card>
</template>