Vue中使用新手引导功能：intro.js

1.webpack相关配置

2.如果是vue-cli3的项目，则在vue.config.js

1.引入

2.初始化

3.html部分

https://github.com/alex-oleshkevich/vue-introjs

https://introjs.com/

用户在进行一些新的 *** 作流程时，提供一些导航流程也是必要的。项目中采用的是iview

的对话框进行实现的。

demo：

<Modal

v-if="modalOFF

===

1">

<p>这里是对话框一</p>

<button

@click="modalOFF

=

2"></button>

</Modal>

<Modal

v-if="modalOFF

===

2">

<p>这里是对话框二</p>

<button

@click="modalOFF

=

3"></button>

</Modal>

<Modal

v-if="modalOFF

===

3">

<p>这里是对话框二</p>

<button

@click="modalOFF

=

null"></button>

</Modal>

js代码：

让谁先显示，就在data中定义modalOFF的属性值。默认是

modalOFF:

1,

当modalOFF为null的时候，对话框也就消失了。

以上这篇vue2.0

实现页面导航提示引导的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue2.0实现导航菜单切换效果vue实现nav导航栏的方法vue-router路由与页面间导航实例解析vue

挂载路由到头部导航的方法

1.引入依赖

yarn add driver.js -S

或者 npm install dirver.js -S

4.在main.js中挂载到vue上

5.使用：在layout文件里使用

在mouted函数调后端接口去判断当前用户是否是第一次登录，如果是调引导页函数，否则不调

---