1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <template>
| <PageWrapper title="引导页" content="用于给用户的指引操作">
| <a-button type="primary" @click="handleStart">开始</a-button>
| </PageWrapper>
| </template>
| <script lang="ts">
| import { defineComponent } from 'vue';
| import { PageWrapper } from '/@/components/Page';
| import { useDesign } from '/@/hooks/web/useDesign';
| import intro from 'intro.js';
| import 'intro.js/minified/introjs.min.css';
|
| export default defineComponent({
| components: { PageWrapper },
| setup() {
| const { prefixVar } = useDesign('');
|
| function handleStart() {
| intro()
| .setOptions({
| steps: [
| {
| title: 'Welcome',
| intro: 'Hello World! 👋',
| },
| {
| title: 'Collapse Button',
| element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
| intro: 'This is the menu collapse button.',
| },
| {
| title: 'User Action',
| element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
| intro: 'This is the user function area.',
| },
| ],
| })
| .start();
| }
| return { handleStart };
| },
| });
| </script>
|
|
