vue-tour

网站地址:https://pulsardev.github.io/vue-tour

GitHub:https://github.com/pulsardev/vue-tour

描述信息:一款轻量级，简单且可定制的用户引导Vue.js插件

访问官网

GitHub

Vue Tour是一款轻量级，简单且可定制的用户引导Vue.js插件，它提供了一种快速简单的方式来指导您的用户通过您的应用程序。

vue-tour特点

轻量级：Vue Tour仅由两个Vue组件和一个非常小的JavaScript文件组成。

简单：在组件中添加一系列步骤，在模板中添加“v-tour”组件，您就可以开始了！

定制：您可以单独更改每个步骤的DOM，使用您自己的类甚至添加自定义动画。

安装

npm install vue-tour

然后在应用程序入口点导入插件（如果使用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
            content: `Discover <strong>Vue Tour</strong>!`
          },
          {
            target: '.v-step-1',
            content: 'An awesome plugin made with 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'
            }
          }
        ]
      }
    },
    mounted: function () {
      this.$tours['myTour'].start()
    }
  }
</script>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/2202