Vue.js的轻量级可定制游览插件– vue-tour

Vue.js的轻量级可定制游览插件– vue-tour
插件名称 vue-tour
版本号 v2.0.0
发布时间 2020年7月13日
插件作者 pulsardev

Vue Tour是一款轻巧,简单且可自定义的Tour插件,可与Vue.js一起使用。它提供了一种快速简便的方法来指导您的用户浏览您的应用程序。

安装和下载:

# NPM
$ npm install vue-tour --save

然后将插件导入您的应用程序入口点(如果您使用vue-cli来搭建项目,则通常为main.js),并告诉Vue使用它。另外,别忘了包括样式。您可以添加默认提供的样式,也可以根据自己的喜好自定义样式。

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h => h(App)
}).$mount('#app')

最后,将v-tour组件放在模板中应用程序中任何位置的位置(通常在App.vue中),并将其传递给一系列步骤。target每个步骤的属性都可以在应用程序的任何组件中定位DOM元素(只要弹出相关步骤时该元素存在于DOM中)。

<template>
  <div>
    <div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
    <div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
    <div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>

    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

<script>
  export default {
    name: 'my-tour',
    data () {
      return {
        steps: [
          {
            target: '#v-step-0',  // We're using document.querySelector() under the hood
            header: {
              title: 'Get Started',
            },
            content: `Discover <strong>Vue Tour</strong>!`
          },
          {
            target: '.v-step-1',
            content: '用Vue.js制作的一个很棒的插件!'
          },
          {
            target: '[data-v-step="2"]',
            content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
            params: {
              placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
            }
          }
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>

对于要添加步骤的所有单个元素,请确保可以使用进行检索document.querySelector()。您可以使用任何选择器,ID,CSS类,数据属性等。完成此操作并且您的步骤正确定位了应用程序的某些DOM元素后,您可以通过调用以下方法开始漫游。

this.$tours['myTour'].start()

变更日志:

v2.0.0(2020/03/28)

  • Bug修复
  • 将Popper.js更新到v2.x

v1.6.0(2020年3月26日)

  • 在返回之前将keyup侦听器移动
  • 添加粘性步骤

v1.5.0(07/11/2020)

  • 之前:添加对拒绝before方法的承诺的支持以及对单元测试的支持
  • 游览:增加了对开始,下一个和上一个的承诺,以便组件的用户可以执行异步操作以使UI处于良好状态