├── .browserslistrc
├── dev
    ├── serve.js
    └── serve.vue
├── .gitignore
├── babel.config.js
├── src
    ├── entry.js
    ├── entry.esm.js
    └── vue-intro-step.vue
├── package.json
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Dev from './serve.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: (h) => h(Dev),
8 | }).$mount('#app');
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const devPresets = ['@vue/babel-preset-app'];
 2 | const buildPresets = [
 3 |   [
 4 |     '@babel/preset-env',
 5 |     // Config for @babel/preset-env
 6 |     {
 7 |       // Example: Always transpile optional chaining/nullish coalescing
 8 |       // include: [
 9 |       //   /(optional-chaining|nullish-coalescing)/
10 |       // ],
11 |     },
12 |   ],
13 | ];
14 | module.exports = {
15 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
16 | };
17 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // iife/cjs usage extends esm default export - so import it all
 2 | import component, * as namedExports from '@/entry.esm';
 3 | 
 4 | // Attach named exports directly to component. IIFE/CJS will
 5 | // only expose one global var, with named exports exposed as properties of
 6 | // that global var (eg. plugin.namedExport)
 7 | Object.entries(namedExports).forEach(([exportName, exported]) => {
 8 |   if (exportName !== 'default') component[exportName] = exported;
 9 | });
10 | 
11 | export default component;
12 | 


--------------------------------------------------------------------------------
/src/entry.esm.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Import vue component
 3 | import component from '@/vue-intro-step.vue';
 4 | 
 5 | // Default export is installable instance of component.
 6 | // IIFE injects install function into component, allowing component
 7 | // to be registered via Vue.use() as well as Vue.component(),
 8 | export default /*#__PURE__*/(() => {
 9 |   // Get component instance
10 |   const installable = component;
11 | 
12 |   // Attach install function executed by Vue.use()
13 |   installable.install = (Vue) => {
14 |     Vue.component('VueIntroStep', installable);
15 |   };
16 |   return installable;
17 | })();
18 | 
19 | // It's possible to expose named exports when writing components that can
20 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
21 | // export const RollupDemoDirective = directive;
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-intro-step",
 3 |   "version": "1.0.12",
 4 |   "description": "基于vue2的系统引导步骤组件。",
 5 |   "main": "dist/vue-intro-step.ssr.js",
 6 |   "browser": "dist/vue-intro-step.esm.js",
 7 |   "module": "dist/vue-intro-step.esm.js",
 8 |   "unpkg": "dist/vue-intro-step.min.js",
 9 |   "license": "MIT",
10 |   "author": {
11 |     "name": "mjhu",
12 |     "email": "1441901570@qq.com"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git@github.com:Mjhuu/vue-intro-step.git"
17 |   },
18 |   "keywords": [
19 |     "vue",
20 |     "vue-intro",
21 |     "vue-intro-step",
22 |     "introjs"
23 |   ],
24 |   "files": [
25 |     "dist/*",
26 |     "src/**/*.vue"
27 |   ],
28 |   "sideEffects": false,
29 |   "scripts": {
30 |     "serve": "vue-cli-service serve dev/serve.js",
31 |     "prebuild": "rimraf ./dist",
32 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
33 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
34 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
35 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
36 |   },
37 |   "dependencies": {},
38 |   "devDependencies": {
39 |     "@babel/core": "^7.14.6",
40 |     "@babel/preset-env": "^7.14.7",
41 |     "@rollup/plugin-alias": "^3.1.2",
42 |     "@rollup/plugin-babel": "^5.3.0",
43 |     "@rollup/plugin-commonjs": "^14.0.0",
44 |     "@rollup/plugin-node-resolve": "^9.0.0",
45 |     "@rollup/plugin-replace": "^2.4.2",
46 |     "@vue/cli-plugin-babel": "^4.5.13",
47 |     "@vue/cli-service": "^4.5.13",
48 |     "cross-env": "^7.0.3",
49 |     "minimist": "^1.2.5",
50 |     "rimraf": "^3.0.2",
51 |     "rollup": "^2.52.8",
52 |     "rollup-plugin-terser": "^7.0.2",
53 |     "rollup-plugin-vue": "^5.1.9",
54 |     "vue": "^2.6.14",
55 |     "vue-template-compiler": "^2.6.14"
56 |   },
57 |   "peerDependencies": {
58 |     "vue": "^2.6.14"
59 |   },
60 |   "engines": {
61 |     "node": ">=12"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import Vue from 'vue';
  3 | import VueIntroStep from '@/vue-intro-step.vue';
  4 | 
  5 | export default Vue.extend({
  6 |   name: 'ServeDev',
  7 |   components: {
  8 |     VueIntroStep
  9 |   },
 10 |   data(){
 11 |     return{
 12 |       show: false,
 13 |       config: {
 14 |         backgroundOpacity: 0.8,
 15 |         titleStyle: {
 16 |           textAlign: 'center',
 17 |           fontSize: '19px',
 18 |         },
 19 |         contentStyle: {
 20 |           textAlign: 'center',
 21 |           fontSize: '15px',
 22 |         },
 23 |         tips: [
 24 |           {
 25 |             el: '#xxx',
 26 |             tipPosition: 'bottom',
 27 |             title: '欢迎使用问答管理系统',
 28 |             content: '点击左侧菜单进行操作',
 29 |             onNext: () => {
 30 |               return new Promise((resolve) => {
 31 |                 // 当页面很长，下一步的内容不在此可视区域内时，可进行下面操作
 32 |                 document.body.style.overflow = 'auto';
 33 |                 // 让body滚动到顶部
 34 |                 window.scrollTo(0,0)
 35 |                 resolve(true);
 36 |               });
 37 |             }
 38 |           },
 39 |           {
 40 |             el: '#right',
 41 |             tipPosition: 'bottom',
 42 |             title: '欢迎使用问答管理系统',
 43 |             content: '点击左侧菜单进行操作点击左侧菜单进行操作点击左侧菜单进行操作点击左侧菜单进行操作点击左侧菜单进行操作点击左侧菜单进行操作',
 44 |             // 点击上一步时，触发的事件
 45 |             onPrev: () => {
 46 |               return new Promise((resolve) => {
 47 |                 resolve(true);
 48 |               });
 49 |             },
 50 |           },
 51 |           {
 52 |             el: '#xxx',
 53 |             tipPosition: 'bottom',
 54 |             title: '欢迎使用问答管理系统',
 55 |             content: '点击左侧菜单进行操作',
 56 |           }
 57 |         ]
 58 |       }
 59 |     }
 60 |   },
 61 |   methods: {
 62 |     close(){
 63 |       this.show = false;
 64 |     },
 65 |     done(){
 66 |       this.show = false;
 67 |     },
 68 |     next(tipItem){
 69 |       // tipItem当前的提示项信息
 70 |       // 调用vue3-intro-step的next方法
 71 |       this.$refs.myIntroStep.next()
 72 |       console.log(tipItem);
 73 |     },
 74 |     prev(tipItem, currentIndex){
 75 | 
 76 |       // 调用vue3-intro-step的prev方法
 77 |       this.$refs.myIntroStep.prev()
 78 |       console.log(tipItem, currentIndex);
 79 |     }
 80 |   }
 81 | });
 82 | </script>
 83 | 
 84 | <template>
 85 |   <div id="app">
 86 |     <button @click="show = true">改变</button>
 87 |     <div style="height: 400px;">
 88 |       123
 89 |     </div>
 90 |     <div id="xxx" style="width: 100px;height: 100px;background-color: seagreen;">
 91 |       443
 92 |     </div>
 93 |     <div id="right" style="position:absolute;right: 10px;top: 10px;width: 100px;height: 60px;background-color: skyblue;">哟次</div>
 94 | 
 95 |     <div style="height: 400px;">
 96 |       3432
 97 |     </div>
 98 |     <button @click="show = true">改变</button>
 99 |     {{show}}
100 |     <vue-intro-step v-model:show="show" :config="config" ref="myIntroStep">
101 |       <!--
102 |         插槽-自定义底部按钮
103 | 
104 |         tipItem当前的提示信息 index当前提示新的索引
105 | 
106 |         不写的话，会显示默认的底部按钮
107 |        -->
108 |       <template #prev="{tipItem, index}">
109 |         <button @click="prev(tipItem, index)">上一步</button>
110 |       </template>
111 |       <template #next="{tipItem}">
112 |         <button @click="next(tipItem)">下一步</button>
113 |       </template>
114 |       <template #done>
115 |         <button @click="done">done</button>
116 |       </template>
117 |       <template #skip>
118 |         <button @click="done">skip</button>
119 |       </template>
120 |     </vue-intro-step>
121 |   </div>
122 | </template>
123 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## vue-intro-step
  2 | 
  3 | ### 请注意！！！这里是基于vue2版本的组件库
  4 | 
  5 | > 基于vue2的系统步骤引导组件。
  6 | > 更加便捷的操作步骤引导。
  7 | > vue3版本的步骤引导组件请移步 [vue3-intro-step](https://www.npmjs.com/package/vue3-intro-step)
  8 | 
  9 | > [vue-intro-step 求⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️](https://github.com/Mjhuu/vue-intro-step)
 10 | 
 11 | ![vue-intro-step](https://user-images.githubusercontent.com/45823607/170439254-b1ede5b9-369b-49b1-993b-e006f5fc7034.gif)
 12 | 
 13 | 
 14 | ### 安装
 15 | 
 16 | ```shell
 17 | npm i vue-intro-step --save
 18 | ```
 19 | 
 20 | > [可选] 为了更好的使用 *vue-intro-step* 使引导组件显示、隐藏不突兀
 21 | > 可以安装 animate.css 实现动画效果
 22 | > ```shell
 23 | > npm i animate.css --save
 24 | > 
 25 | > # 在main.js中引入
 26 | > import 'animate.css'
 27 | > ```
 28 | 
 29 | ### 全局引用
 30 | 
 31 | `main.js`
 32 | 
 33 | ```js
 34 | import Vue from 'vue'
 35 | import VueIntroStep from 'vue-intro-step'
 36 | 
 37 | Vue.component('vue-intro-step', VueIntroStep);
 38 | 
 39 | ```
 40 | 
 41 | ### 局部引用
 42 | 
 43 | ```vue
 44 | 
 45 | <template>
 46 |   <vue-intro-step
 47 |       v-model="show" 
 48 |       :config="config"
 49 |       @close="closeIntro"
 50 |   />
 51 | </template>
 52 | 
 53 | <script>
 54 | import VueIntroStep from 'vue-intro-step'
 55 | 
 56 | export default {
 57 |   name: 'App',
 58 |   components: {
 59 |     VueIntroStep
 60 |   },
 61 |   data () {
 62 |     return {
 63 |       show: false,
 64 |       config: {
 65 |         backgroundOpacity: 0.8,
 66 |         titleStyle: {
 67 |           textAlign: 'center',
 68 |           fontSize: '19px',
 69 |         },
 70 |         contentStyle: {
 71 |           textAlign: 'center',
 72 |           fontSize: '15px',
 73 |         },
 74 |         tips: [
 75 |           {
 76 |             el: '#intro_title',
 77 |             tipPosition: 'bottom',
 78 |             title: '欢迎使用问答管理系统',
 79 |             content: '点击左侧菜单进行操作',
 80 |             onNext: () => {
 81 |               return new Promise((resolve, reject) => {
 82 |                 // 延迟2秒 再执行下一步
 83 |                 setTimeout(() => {
 84 |                   resolve(true);
 85 |                 }, 2000);
 86 |               });
 87 |             }
 88 |           },
 89 |           {
 90 |             el: '#intro_mine',
 91 |             tipPosition: 'left',
 92 |             // title: '点击进入个人中心',
 93 |             content: '查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码',
 94 |             // 点击上一步时，触发的事件
 95 |             onPrev: () => {
 96 |               return new Promise((resolve) => {
 97 |                 resolve(true);
 98 |               });
 99 |             },
100 |             onNext: () => {
101 |               return new Promise((resolve) => {
102 |                 // 当页面很长，下一步的内容不在此可视区域内时，可进行下面操作
103 |                 document.body.style.overflow = 'auto';
104 |                 // 让body滚动到顶部
105 |                 window.scrollTo(0,0)
106 |                 resolve(true);
107 |               });
108 |             }
109 |           },
110 |           {
111 |             el: '#intro_user',
112 |             tipPosition: 'right',
113 |             title: '点击进入用户管理',
114 |             content: '查看用户信息，添加用户',
115 |             onNext: () => {
116 |               return Promise.resolve(true)
117 |             }
118 |           },
119 |           {
120 |             el: '#intro_save',
121 |             tipPosition: 'top',
122 |             title: '点击进入用户管理',
123 |             content: '查看用户信息，添加用户'
124 |           }
125 |         ]
126 |       }
127 |     }
128 |   },
129 |   methods: {
130 |     closeIntro() {
131 |       // 不需要this.show = false，因为v-model会自动更新
132 |       console.log('关闭');
133 |     },
134 |   }
135 | }
136 | </script>
137 | ```
138 | 
139 | ### 自定义底部按钮
140 | 
141 | ```vue
142 | <template>
143 |   <vue-intro-step v-model="show" :config="config" ref="myIntroStep">
144 |     <!--
145 |       插槽-自定义底部按钮
146 | 
147 |       tipItem当前的提示信息 index当前提示新的索引
148 | 
149 |       不写的话，会显示默认的底部按钮
150 |      -->
151 |     <template #prev="{tipItem, index}">
152 |       <button @click="prev(tipItem, index)">上一步</button>
153 |     </template>
154 |     <template #next="{tipItem}">
155 |       <button @click="next(tipItem)">下一步</button>
156 |     </template>
157 |     <template #done>
158 |       <button @click="done">done</button>
159 |     </template>
160 |     <template #skip>
161 |       <button @click="done">skip</button>
162 |     </template>
163 |   </vue-intro-step>
164 | </template>
165 | 
166 | <script >
167 | export default {
168 |   methods: {
169 |     done(){
170 |       this.show = false;
171 |     },
172 |     next(tipItem){
173 |       // tipItem当前的提示项信息
174 |       // 调用vue-intro-step的next方法 手动触发下一步
175 |       this.$refs.myIntroStep.next()
176 |       console.log(tipItem);
177 |     },
178 |     prev(tipItem, currentIndex){
179 | 
180 |       // 调用vue-intro-step的prev方法 手动触发上一步
181 |       this.$refs.myIntroStep.prev()
182 |       console.log(tipItem, currentIndex);
183 |     }
184 |   }
185 | }
186 | </script>
187 | ```
188 | 
189 | ## 组件参数
190 | 
191 | > `v-model` 参数：控制步骤引导组件是否显示
192 | >
193 | > `config` 参数：配置步骤引导组件的参数
194 | >   - `backgroundOpacity?` 参数：步骤引导组件的背景透明度，默认值为0.9，取值范围0-1
195 | >  - `titleStyle?` 参数：步骤引导组件的标题样式
196 | >     - `textAlign?` 参数：标题文字的居中样式，默认值为 `center`，可选值有：`left`, `center`, `right`
197 | >     - `fontSize?` 参数：标题文字的字体大小样式
198 | >  - `contentStyle?` 参数：步骤引导组件的内容样式
199 | >     - `textAlign?` 参数：内容文字的居中样式，默认值为 `center`，可选值有：`left`, `center`, `right`
200 | >     - `fontSize?` 参数：内容文字的字体大小样式
201 | >  - `tips` 参数：用于盛放哪些元素需要引导
202 | >      - `el` 参数：元素的选择器，切记目前只支持id选择器
203 | >      - `tipPosition` 参数：引导元素提示信息的位置，可选值有：`top`, `bottom`, `left`, `right`
204 | >     - `title?` 参数：引导元素提示信息的标题
205 | >     - `content` 参数：引导元素提示信息的内容
206 | >     - `onNext?` 参数：引导元素提示信息点击 *下一步* 按钮时的回调函数，返回一个promise，如果返回的promise成功，则继续下一步，否则不继续下一步
207 | >     - `onPrev?` 参数：引导元素提示信息点击 *上一步* 按钮时的回调函数，返回一个promise，如果返回的promise成功，则继续上一步，否则不继续上一步
208 | >
209 | > `@close` 事件参数：关闭步骤引导组件时会触发的事件
210 | 


--------------------------------------------------------------------------------
/src/vue-intro-step.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition
  3 |       name="custom-classes-transition"
  4 |       enter-active-class="animate__animated animate__fadeIn animate__faster"
  5 |       leave-active-class="animate__animated animate__fadeOut animate__faster"
  6 |   >
  7 |     <div v-if="show" id="intro_box">
  8 |       <div class="top" :style="{height: `${originalBox.top}px`, backgroundColor: `rgba(0, 0, 0, ${config.backgroundOpacity ? config.backgroundOpacity : 0.9})`}"/>
  9 |       <div class="content" :style="{height: `${originalBox.height}px`}">
 10 |         <div class="left"
 11 |              :style="{top: `${originalBox.top}px`, width: `${originalBox.left}px`, height: `${originalBox.height}px`, backgroundColor: `rgba(0, 0, 0, ${config.backgroundOpacity ? config.backgroundOpacity : 0.9})`}"/>
 12 | 
 13 |         <div class="original-box"
 14 |              :style="{top: `${originalBox.top}px`, left: `${originalBox.left}px`,width: `${originalBox.width}px`, height: `${originalBox.height}px`}">
 15 |           <div class="round round-flicker"></div>
 16 |         </div>
 17 |         <div class="tip-box" :style="tipBoxStyle">
 18 |           <div class="tip-content">
 19 |             <div v-if="config.tips[currentIndex].title"
 20 |                  class="title"
 21 |                  :style="{textAlign: config.titleStyle ? config.titleStyle.textAlign ? config.titleStyle.textAlign : 'center' : 'center', fontSize: config.titleStyle ? config.titleStyle.fontSize ? config.titleStyle.fontSize : '19px' : '19px'}"
 22 |             >
 23 |               {{ config.tips[currentIndex].title }}
 24 |             </div>
 25 |             <div class="content"
 26 |                  :style="{textAlign: config.contentStyle ? config.contentStyle.textAlign ? config.contentStyle.textAlign : 'center' : 'center', fontSize: config.contentStyle ? config.contentStyle.fontSize ? config.contentStyle.fontSize : '15px' : '15px'}"
 27 |             >
 28 |               {{ config.tips[currentIndex].content }}
 29 |             </div>
 30 |             <div class="action"
 31 |                  :style="{ justifyContent: 'center' }"
 32 |             >
 33 |               <slot name="prev" v-bind:index="currentIndex" v-bind:tipItem="config.tips[currentIndex]" v-if="currentIndex !== 0">
 34 |                 <div class="item prev" @click="prev">上一步</div>
 35 |               </slot>
 36 |               <slot name="next" v-bind:index="currentIndex" v-bind:tipItem="config.tips[currentIndex]" v-if="currentIndex !== config.tips.length - 1">
 37 |                 <div class="item next" @click="next">下一步</div>
 38 |               </slot>
 39 |               <slot name="done" v-bind:index="currentIndex" v-bind:tipItem="config.tips[currentIndex]" v-if="currentIndex === config.tips.length - 1">
 40 |                 <div class="item done" @click="done">完成</div>
 41 |               </slot>
 42 |               <slot v-else name="skip" v-bind:index="currentIndex" v-bind:tipItem="config.tips[currentIndex]">
 43 |                 <div class="item skip" @click="done">跳过</div>
 44 |               </slot>
 45 |             </div>
 46 |           </div>
 47 |         </div>
 48 |         <div class="right"
 49 |              :style="{top: `${originalBox.top}px`, left: `${originalBox.left + originalBox.width}px`,width: `calc(100% - ${originalBox.left + originalBox.width}px)`, height: `${originalBox.height}px`, backgroundColor: `rgba(0, 0, 0, ${config.backgroundOpacity ? config.backgroundOpacity : 0.9})`}"
 50 |              ref="tip_box"/>
 51 |       </div>
 52 |       <div class="bottom" :style="{height: `calc(100% - ${originalBox.top}px - ${originalBox.height}px)`, backgroundColor: `rgba(0, 0, 0, ${config.backgroundOpacity ? config.backgroundOpacity : 0.9})`}"/>
 53 |     </div>
 54 |   </transition>
 55 | </template>
 56 | 
 57 | <script>
 58 | function throttle(fn, delay) {
 59 |   let timerId = null;
 60 |   let flag = true;
 61 |   return function () {
 62 |     if (!flag) return;
 63 |     flag = false;
 64 |     let self = this;
 65 |     let args = arguments;
 66 |     timerId && clearTimeout(timerId);
 67 |     timerId = setTimeout(function () {
 68 |       flag = true;
 69 |       fn.apply(self, args);
 70 |     }, delay || 1000);
 71 |   }
 72 | }
 73 | export default {
 74 |   name: "vueIntroStep",
 75 |   props: {
 76 |     show: {
 77 |       type: Boolean,
 78 |       default: false,
 79 |       required: true
 80 |     },
 81 |     config: {
 82 |       type: Object,
 83 |       required: true
 84 |     }
 85 |   },
 86 |   model: {
 87 |     prop: "show",
 88 |     event: "close"
 89 |   },
 90 |   data() {
 91 |     return {
 92 |       // 聚焦盒子的信息
 93 |       originalBox: {
 94 |         left: 250,
 95 |         top: 250,
 96 |         width: 200,
 97 |         height: 100
 98 |       },
 99 |       // 提示盒子的位置
100 |       tipBoxPosition: 'bottom',
101 |       // 当前显示的提示进度索引
102 |       currentIndex: 0,
103 |     }
104 |   },
105 |   watch: {
106 |     config: {
107 |       deep: true,
108 |       handler() {
109 |         // 监听配置变化 重置当前显示的索引
110 |         this.currentIndex = 0;
111 |       },
112 |       immediate: true
113 |     },
114 |     show(val) {
115 |       if (val) {
116 |         this.setBoxInfo();
117 |       }else {
118 |         // 允许页面滚动
119 |         document.body.style.overflow = 'auto';
120 |       }
121 |     }
122 |   },
123 |   computed: {
124 |     // 计算提示盒子的位置
125 |     // eslint-disable-next-line vue/return-in-computed-property
126 |     tipBoxStyle() {
127 |       // 如果提示盒子的位置是right
128 |       if (this.tipBoxPosition === 'right') {
129 |         return {
130 |           left: `${this.originalBox.left + this.originalBox.width}px`,
131 |           top: `${this.originalBox.top}px`
132 |         }
133 |       } else if (this.tipBoxPosition === 'left') {
134 |         return {
135 |           right: `${window.innerWidth - this.originalBox.left}px`,
136 |           top: `${this.originalBox.top}px`
137 |         }
138 |       } else if (this.tipBoxPosition === 'top') {
139 |         return {
140 |           left: `${this.originalBox.left}px`,
141 |           bottom: `${window.innerHeight - this.originalBox.top}px`
142 |         }
143 |       } else if (this.tipBoxPosition === 'bottom') {
144 |         return {
145 |           left: `${this.originalBox.left > window.innerWidth - 300 ? window.innerWidth - 300 : this.originalBox.left}px`,
146 |           top: `${this.originalBox.top + this.originalBox.height}px`
147 |         }
148 |       }
149 |     }
150 |   },
151 |   created() {
152 |     this.init();
153 |   },
154 |   mounted() {
155 |     window.onresize = throttle(() => {
156 |       if (this.show) {
157 |         this.setBoxInfo();
158 |       }
159 |     }, 100)
160 |   },
161 |   beforeDestroy() {
162 |     window.onresize = null;
163 |   },
164 |   methods: {
165 |     async prev() {
166 |       // 判断是否有onPrev 是否可以继续往下走
167 |       let flag = true;
168 |       if (this.config.tips[this.currentIndex] && this.config.tips[this.currentIndex].onPrev) {
169 |         flag = await this.config.tips[this.currentIndex].onPrev();
170 |       }
171 | 
172 |       // 如果不能继续往下走
173 |       if(!flag){
174 |         throw new Error('onPrev 需要 Promise.resolve(true) 才可以继续往下走');
175 |       }
176 |       this.setBoxInfo(this.currentIndex - 1);
177 |     },
178 |     async next() {
179 |       // 判断是否有onNext 是否可以继续往下走
180 |       let flag = true;
181 |       if (this.config.tips[this.currentIndex] && this.config.tips[this.currentIndex].onNext) {
182 |         flag = await this.config.tips[this.currentIndex].onNext();
183 |       }
184 | 
185 |       // 如果不能继续往下走
186 |       if(!flag){
187 |         throw new Error('onNext 需要 Promise.resolve(true) 才可以继续往下走');
188 |       }
189 |       this.setBoxInfo(this.currentIndex + 1);
190 |     },
191 |     done() {
192 |       this.$emit('close', false);
193 |     },
194 |     // 根据标签获取盒子的位置
195 |     async setBoxInfo(index) {
196 |       try {
197 |         if (index === undefined) {
198 |           index = this.currentIndex;
199 |         }
200 | 
201 |         if(this.show){
202 |           // 禁止页面滚动
203 |           document.body.style.overflow = 'hidden';
204 |         }
205 | 
206 |         let el = this.config.tips[index].el;
207 |         let box = document.querySelector(el);
208 |         if (!box) {
209 |           throw new Error('没有找到相应的元素');
210 |         }
211 |         let rect = box.getBoundingClientRect();
212 |         this.originalBox = {
213 |           left: rect.left,
214 |           top: rect.top,
215 |           width: rect.width,
216 |           height: rect.height
217 |         }
218 |         this.tipBoxPosition = this.config.tips[index].tipPosition;
219 | 
220 |         this.currentIndex = index;
221 |       } catch (e) {
222 |         throw new Error(e.message);
223 |       }
224 |     },
225 |     // 根据配置初始化
226 |     init() {
227 |       // 获取config中的tips数组
228 |       const {tips} = this.config;
229 |       let timer = null;
230 |       // 判断tips是否存在 并且tips是否是数组
231 |       if (tips && Array.isArray(tips)) {
232 |         // 如果tips存在 并且tips是数组
233 |         // 判断tips数组是否有数据
234 |         if (tips.length > 0) {
235 |           // 如果tips数组有数据
236 |           // 初始化当前提示进度索引
237 |           this.currentIndex = 0;
238 |           // 获取第一个盒子
239 |           try {
240 |             let firstBox = document.querySelector(tips[0].el);
241 |             timer = setInterval(() => {
242 |               firstBox = document.querySelector(tips[0].el);
243 |               if (firstBox) {
244 |                 // 如果第一个盒子存在
245 |                 this.setBoxInfo(0);
246 |                 clearInterval(timer);
247 |               }
248 |             }, 0)
249 |           } catch (e) {
250 |             throw new Error(e.message)
251 |           }
252 |         } else {
253 |           throw new Error('tips数组不能为空');
254 |         }
255 |       } else {
256 |         throw new Error('config中的tips不存在或者不是数组');
257 |       }
258 |     }
259 |   }
260 | }
261 | </script>
262 | 
263 | <style scoped>
264 | #intro_box {
265 |   position: fixed;
266 |   left: 0;
267 |   top: 0;
268 |   width: 100%;
269 |   height: 100%;
270 |   z-index: 99999;
271 | }
272 | #intro_box > .top {
273 |   width: 100%;
274 | }
275 | #intro_box > .content {
276 |   width: 100%;
277 | }
278 | #intro_box > .content > .left {
279 |   position: absolute;
280 |   left: 0;
281 | }
282 | #intro_box > .content > .original-box {
283 |   position: absolute;
284 |   background-color: transparent;
285 |   transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
286 | }
287 | #intro_box > .content > .original-box .round {
288 |   position: absolute;
289 |   left: 10px;
290 |   top: 50%;
291 |   transform: translateY(-50%);
292 |   width: 10px;
293 |   height: 10px;
294 |   border-radius: 50%;
295 |   opacity: 0.65;
296 |   background-color: #9900ff;
297 | }
298 | #intro_box > .content > .original-box .round-flicker:before,
299 | #intro_box > .content > .original-box .round-flicker:after {
300 |   content: '';
301 |   width: 100%;
302 |   height: 100%;
303 |   position: absolute;
304 |   left: -1px;
305 |   top: -1px;
306 |   box-shadow: #9900ff 0px 0px 2px 2px;
307 |   border: 1px solid rgba(153, 0, 255, 0.5);
308 |   border-radius: 50%;
309 |   animation: warn 2s linear 0s infinite;
310 | }
311 | @keyframes warn {
312 |   0% {
313 |     transform: scale(0.5);
314 |     opacity: 1;
315 |   }
316 |   25% {
317 |     transform: scale(1);
318 |     opacity: 0.75;
319 |   }
320 |   50% {
321 |     transform: scale(1.5);
322 |     opacity: 0.5;
323 |   }
324 |   75% {
325 |     transform: scale(2);
326 |     opacity: 0.25;
327 |   }
328 |   100% {
329 |     transform: scale(2.5);
330 |     opacity: 0;
331 |   }
332 | }
333 | #intro_box > .content > .tip-box {
334 |   position: absolute;
335 |   /*宽度应为内容宽*/
336 |   width: fit-content;
337 |   max-width: 300px;
338 |   box-sizing: border-box;
339 |   /*高度应为内容高度*/
340 |   height: fit-content;
341 |   transition: all 0.3s;
342 |   z-index: 99999;
343 |   padding: 12px;
344 |   font-size: 15px;
345 | }
346 | #intro_box > .content > .tip-box > .tip-content {
347 |   border-radius: 10px;
348 |   overflow: hidden;
349 |   padding: 10px;
350 |   color: #fff;
351 | }
352 | #intro_box > .content > .tip-box > .tip-content > .title {
353 |   font-weight: bold;
354 |   margin-bottom: 10px;
355 | }
356 | #intro_box > .content > .tip-box > .tip-content > .content {
357 |   white-space: normal;
358 |   overflow-wrap: break-word;
359 |   line-height: 1.5;
360 | }
361 | #intro_box > .content > .tip-box > .tip-content > .action {
362 |   margin-top: 15px;
363 |   width: 100%;
364 |   display: flex;
365 | }
366 | #intro_box > .content > .tip-box > .tip-content > .action > .item {
367 |   display: flex;
368 |   justify-content: center;
369 |   align-items: center;
370 |   text-align: center;
371 |   border-radius: 15px;
372 |   font-size: 12px;
373 |   cursor: pointer;
374 |   transition: all 0.3s;
375 |   padding: 5px 15px;
376 |   color: #fff;
377 |   font-weight: bold;
378 |   border: 1px solid #ccc;
379 |   margin: 5px;
380 | }
381 | #intro_box > .content > .tip-box > .tip-content > .action > .item.prev {
382 |   color: #ccc;
383 | }
384 | #intro_box > .content > .tip-box > .tip-content > .action > .item.next {
385 |   color: #ccc;
386 | }
387 | #intro_box > .content > .tip-box > .tip-content > .action > .item.done {
388 |   color: #ccc;
389 | }
390 | #intro_box > .content > .tip-box > .tip-content > .action > .item.skip {
391 |   color: #ccc;
392 | }
393 | #intro_box > .content > .right {
394 |   position: absolute;
395 |   background-color: rgba(0, 0, 0, 0.9);
396 | }
397 | #intro_box > .bottom {
398 |   width: 100%;
399 |   background-color: rgba(0, 0, 0, 0.9);
400 | }
401 | </style>


--------------------------------------------------------------------------------