跨页面新手引导 思路

?
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link crossorigin="anonymous" integrity="sha384-cH28etaYXGV0odKyp4NzakDm9jgWghOa00YPrGTYUf1Ka8qTcQw9NO456x/4ZLVY"
        href="https://lib.baomitu.com/driver.js/0.9.8/driver.min.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-iw67aNAQa9PD3IxD5gYwEb9FOuItrWzUITZT3EUrQMt+pSzPUdNsJcL2dI2NJ9Mp"
        src="https://lib.baomitu.com/driver.js/0.9.8/driver.min.js"></script>
    <title>driver</title>
    <style>
        .box-1 {
            width: 100px;
            height: 100px;
            background-color: #1aa094;
            display: inline-block;
        }
 
        .box-2 {
            width: 200px;
            height: 200px;
            background-color: #FF6347;
            float: right;
 
        }
 
        .box-3 {
            margin-top: 400px;
            background-color: #00a2d4;
            float: right;
 
        }
 
        /*
        * 隐藏引导中的关闭按钮，必须到最后一步才能关闭
        */
        div#driver-popover-item .driver-popover-footer button {
            display: none;
        }
    </style>
</head>
 
<body>
 
    <div class="box-1" data-vale="2">
        1
    </div>
 
 
    <button class="box-3" onclick="javascript:driver.start();">
        重新引导
    </button>
    <script>
        const steps = [
            {
                element: '.box-1',
                popover: {
                    title: "第一步",
                    description: '这是one',
                    //position: 'top', //位置，可选值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
                    opacity: 0.1,
                    animate: true,
                    closeBtnText: '关闭提示',
                    nextBtnText: 'next->',
                    prevBtnText: '<-prev',
                }
            },
            {
                element: '.box-2',
                popover: {
                    title: "第二步",
                    description: '这是two',
                    position: 'left'
                }
            },
            // {
            //     element: '.box-3',
            //     popover: {
            //         title: "第三步",
            //         description: '这是three',
            //         //position: 'bottom'
            //     }
            // }
        ];
        const channel = new BroadcastChannel('myChannel');
        const driver = new Driver({
            allowClose: false, // 是否点击遮罩关闭
            overlayClickNext: false, //是否允许点击遮罩时移到到下一步
            doneBtnText: "我知道了", // 最终按钮上的文本, 最后一步 按钮文案
            closeBtnText: "跳过", //  默认的 关闭 按钮文案
            nextBtnText: "下一步", // 默认的 下一步 按钮文案
            prevBtnText: "上一步", // 默认的  上一步 按钮文案
            overlayClickNext: true,
            padding: 10,    // 边距
            // 覆盖即将清除时调用
            onReset: (e) => {
 
                if (driver.hasNextStep()) {
                    console.log("验证是否有下一步", driver.hasNextStep())
                    return false;
                }
 
            },
            // 在任何步骤转到下一步时调用
            onNext: (e) => {
                const box1 = e.node
                const dataValue = box1.getAttribute('data-vale');
                if (dataValue == 2) {
 
 
                    let a = {
                        element: '.box-2',
                        popover: {
                            title: "第二步",
                            description: '这是two',
                            position: 'left'
                        }
                    }
                    channel.postMessage(a);
                }
                console.log("dataValue", dataValue)
                console.log("onNext", e)
            },
            // 在任何步骤转到上一步时调用
            onPrevious: (e) => {
                console.log("onPrevious", e)
                //如果没有上一步，阻止执行
                if (!driver.hasPreviousStep()) {
                    console.log("验证是否有上一步", driver.hasPreviousStep())
                    driver.preventMove();// 阻止当前移动
                    return;
                }
 
            }
        });
 
        driver.defineSteps(steps)
        driver.start()
        channel.onmessage = function (event) {
            steps.unshift(event.data)
            driver.defineSteps(steps)
            driver.start()
            console.log(event.data);
        }
 
    </script>
</body>
 
</html>

　　

 

 

?
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link crossorigin="anonymous" integrity="sha384-cH28etaYXGV0odKyp4NzakDm9jgWghOa00YPrGTYUf1Ka8qTcQw9NO456x/4ZLVY"
        href="https://lib.baomitu.com/driver.js/0.9.8/driver.min.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-iw67aNAQa9PD3IxD5gYwEb9FOuItrWzUITZT3EUrQMt+pSzPUdNsJcL2dI2NJ9Mp"
        src="https://lib.baomitu.com/driver.js/0.9.8/driver.min.js"></script>
    <title>driver</title>
    <style>
        .box-1 {
            width: 100px;
            height: 100px;
            background-color: #1aa094;
            display: inline-block;
        }
 
        .box-2 {
            width: 200px;
            height: 200px;
            background-color: #FF6347;
            float: right;
 
        }
 
        .box-3 {
            margin-top: 400px;
            background-color: #00a2d4;
            float: right;
 
        }
 
        /*
        * 隐藏引导中的关闭按钮，必须到最后一步才能关闭
        */
        div#driver-popover-item .driver-popover-footer button {
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="box-2" data-vale="3">
        2
    </div>
 
    <script>
        let  channel = null;
        channel = new BroadcastChannel('myChannel');
        const driver = new Driver({
            allowClose: false, // 是否点击遮罩关闭
            overlayClickNext: false, //是否允许点击遮罩时移到到下一步
            doneBtnText: "我知道了", // 最终按钮上的文本, 最后一步 按钮文案
            closeBtnText: "跳过", //  默认的 关闭 按钮文案
            nextBtnText: "下一步", // 默认的 下一步 按钮文案
            prevBtnText: "上一步", // 默认的  上一步 按钮文案
            overlayClickNext: true,
            padding: 10,    // 边距
            // 覆盖即将清除时调用
            onReset: (e) => {
                console.log("onReset 关闭", e)
 
                if (driver.hasNextStep()) {
                    console.log("验证是否有下一步", driver.hasNextStep())
                    return false;
                }
 
            },
            // 在任何步骤转到下一步时调用
            onNext: (e) => {
                const box1 = e.node
                const dataValue = box1.getAttribute('data-vale');
                if (dataValue == 3) {
                    let a = {
                        element: '.box-3',
                        popover: {
                            title: "第三步",
                            description: '这是three',
                            //position: 'bottom'
                        }
                    }
                    channel.postMessage(a);
 
                }
                console.log("onNext", e)
            },
            // 在任何步骤转到上一步时调用
            onPrevious: (e) => {
                //如果没有上一步，阻止执行
                if (!driver.hasPreviousStep()) {
                    console.log("验证是否有上一步", driver.hasPreviousStep())
                    driver.preventMove();// 阻止当前移动
                    return;
                }
                console.log("onPrevious", e)
            }
        });
        let steps = [
            {
                element: '.box-3',
                popover: {
                    title: "第三步",
                    description: '这是three',
                    //position: 'bottom'
                }
            }
        ];
      
        channel.onmessage = function (event) {
            steps.unshift(event.data)
            driver.defineSteps(steps)
            driver.start()
            console.log(event.data);
        }
 
 
    </script>
</body>
 
</html>

　　

posted @   前端搬运工bug  阅读(50)  评论(0)  编辑  收藏  举报
相关博文：
·  桥接模式 优化代码重复性
·  动态二级联动
·  推荐一个页面引导库 driver.js
·  NewbieGuide初使用体验
·  利用Vue+intro.js实现页面新手引导流程功能
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae