vue-introjs实现网站引导功能

说明

本文首发地址:vue-introjs实现网站引导功能

效果展示

静态

image-20220213124704018

动态演示

introgif

相关技术

  • vue-2.5.2
  • intro.js-5.0.0

intro.js的一分钟入门说明

intro.js是一个提供了新手引导相关功能的js库,使用呢也很简单,给你想要加入引导说明的html元素上加入data-intro属性,并赋值,然后在script中调用introJs().start()方法,刷新页面就行了;

更多内容请参考官网教程,这个库很容易上手:https://introjs.com/docs/examples/basic/hello-world

vue项目中使用intro.js

安装

我是通过npm安装的

npm install intro.js --save

当然也支持其他方式安装,可以参考官网:https://introjs.com/docs/getting-started/install

配置

  1. 在项目的main.js中,引入intro.js库和相关样式文件

    import intro from 'intro.js' // introjs库
    import 'intro.js/introjs.css' // introjs默认css样式
    // introjs还提供了多种主题,可以通过以下方式引入
    import 'intro.js/themes/introjs-modern.css' // introjs主题
    
  2. intro.js加入到vueprototype中,方便使用,就可以直接通过this.$intro()来调用了

    // 加到prototype中,直接通过vue实例就能调用intro了
    Vue.prototype.$intro = intro
    

    关于prototype的说明:https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

使用

  1. 选定一个html标签,加上data-intro属性,赋值内容,以下面为例

    <img data-intro="这是一张普通的图片" data-step="1" src="./assets/logo.png">
    

    data-step是展示的步骤设置,填写数字即可

  2. script中,加入mounted方法,启动intro

    mounted () {
       this.$intro().start()
    },
    
  3. 刷新页面即可看到效果

    image-20220213131251753

一些问题

只首次进入的时候显示引导

新手引导一般只有我们第一次进入这个网站的时候才会出现引导内容,后续都不会再显示,我们这里如何实现?

可以通过localstorge来存储一个key,来判断用户是否是第一次进入这个网站,只需要在引导启动时候加个判断就行,代码如下:

mounted () {
    this.$nextTick(() => {
      if (localStorage.getItem('isFirst') === null || localStorage.getItem('isFirst') !== '1') {
        this.$intro().start()
        localStorage.setItem('isFirst', 1)
      }
    })
  },

如果是v-for循环出来的元素,我们咋显示引导内容呢?

解决办法就是封装一个v-intro-if指令,在循环中判断,指定条件的显示引导内容即可

main.js中加入以下代码:

// 封装一个v-intro-if指令,这样就可以在循环中展示符合特定条件的引导了
Vue.directive('intro-if', {
  bind: function (el, binding) {
    if (binding.value === false) {
      delete el.dataset.intro
      delete el.dataset.hint
    }
  }
})

关于vue自定义指令:https://cn.vuejs.org/v2/guide/custom-directive.html

demo源代码

上述案例源码地址:https://github.com/hczs/vue-introjs-example

  • 4
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,下面是一个使用 Intro.js 生成引导页面的示例代码。这个示例中,我们将介绍如何创建一个简单的引导页面,并使用一些样式来美化它: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Intro.js 示例</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.3.1/introjs.min.css"> <style> .introjs-tooltip { max-width: 400px; border-radius: 3px; box-shadow: 0 0 20px rgba(0,0,0,0.3); background-color: #fff; color: #333; } .introjs-arrow { border-top-color: #fff; } .introjs-tooltipbuttons { text-align: center; } .introjs-button { background-color: #e1e1e1; color: #333; border-radius: 3px; padding: 5px 10px; margin: 5px; cursor: pointer; } .introjs-button:hover { background-color: #d2d2d2; } .introjs-button:focus { outline: none; } </style> </head> <body> <h1>Intro.js 示例</h1> <p>这是一个使用 Intro.js 创建的引导页面示例。</p> <button id="startBtn">开始引导</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.3.1/intro.min.js"></script> <script> document.getElementById("startBtn").addEventListener("click", function() { introJs().setOptions({ steps: [ { element: document.querySelector('h1'), intro: "这是页面的标题。" }, { element: document.querySelector('p'), intro: "这是页面的主体内容。" }, { element: document.querySelector('#startBtn'), intro: "这是开始引导按钮。", position: 'bottom' } ], showBullets: false, exitOnOverlayClick: false, exitOnEsc: false }).start(); }); </script> </body> </html> ``` 在这个示例中,我们使用了一些 CSS 样式来美化 Intro.js 的工具提示框和按钮。我们还使用了 `setOptions()` 方法来设置引导页面的参数选项,例如 `steps`、`showBullets`、`exitOnOverlayClick` 和 `exitOnEsc` 等。最后,我们在按钮的点击事件中调用 `introJs().start()` 方法启动引导页面。 你可以根据自己的需求调整这个示例代码,以生成自己的引导页面

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值