vue中使用vue-tour实现页面新手向导

1.首先在项目中下载引入

npm install vue-tour

2.在main.js

import VueTour from 'vue-tour'

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

Vue.use(VueTour)

3.最后在使用的页面引入就ok

<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 style="height:3000px;"></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>

至此是最基础的写法,当然也可以参考api

可以在初始化项目是传入:options

1.useKeyboardNavigation
如果设置为true,则可以使用←、→和ESC键来导航整个tour(默认为true)。

<v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour>
myOptions:{
            useKeyboardNavigation: false,    //不使用←、→和ESC键来导航tour
        },

2.startTimeout
定义循环开始之前的等待时间。

myOptions:{
            useKeyboardNavigation: false,    //不使用←、→和ESC键来导航tour
            startTimeout: 1000,   //1秒后执行
        },

3.labels
因为默认步骤名称是英文所以可以通过labels来修改

myOptions:{
            useKeyboardNavigation: false,    //不使用←、→和ESC键来导航tour
            startTimeout: 1000,   //1秒后执行
            labels: {
                buttonSkip: '跳过',
                buttonPrevious: '上一步',
                buttonNext: '下一步',
                buttonStop: '关闭'
            }
        },

插槽

可以使用插槽广泛的修改每一步的内容
示例:该组件包含一个默认插槽,该插槽将v-for循环包装在作为道具传递的步骤上。步骤本身包含两个插槽:一个内容插槽和一个操作插槽。然后,如果你想覆盖DOM的步骤,你可以这样做覆盖插槽:

<v-tour name="myTour" :steps="steps" :options="myOptions">
        <template slot-scope="tour">
            <transition name="fade">
                <v-step
                    v-if="tour.currentStep === index"
                    v-for="(step, index) of tour.steps"
                    :key="index"
                    :step="step"
                    :previous-step="tour.previousStep"
                    :next-step="tour.nextStep"
                    :stop="tour.stop"
                    :is-first="tour.isFirst"
                    :is-last="tour.isLast"
                    :labels="tour.labels"
                >
                   <template v-if="tour.currentStep === 0">
                        <div slot="content">
                            <el-button type="success" icon="el-icon-check" circle></el-button>
                        </div>
                        <div slot="actions">
                            <button @click="tour.previousStep" class="btn btn-primary">上一步</button>
                            <button @click="tour.nextStep" class="btn btn-primary">下一步</button>
                            <button @click="tour.stop" class="btn btn-primary">关闭</button>
                        </div>
                    </template>
                </v-step>
            </transition>
        </template>
    </v-tour>
修改的第一步.jpg

Callbacks回调函数

Vue Tour提供回调,允许您在Tour的不同时刻执行自定义操作
要使用回调,请在v-tour组件中添加:

<v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks"> </v-tour>
myCallbacks: {
            onPreviousStep: this.myCustomPreviousStepCallback,   //在data中定义两个回调
            onNextStep: this.myCustomNextStepCallback
        },
myCustomPreviousStepCallback (currentStep) {  //methods
            console.log('[Vue Tour] A custom previousStep callback has been called on step ' + (currentStep + 1))
        },
myCustomNextStepCallback (currentStep) {
            console.log('[Vue Tour] A custom nextStep callback has been called on step ' + (currentStep + 1))

            if (currentStep === 1) {
            console.log('[Vue Tour] A custom nextStep callback has been called from step 2 to step 3')
            }
         }
现在只支持四种回调函数

Features 特性

1.highlight
通过将highlight选项设置为true,可以突出显示当前步骤中的元素

myOptions:{ highlight: true, }

设置步骤参数的params进行单个设置

steps: [
    {
            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',
              highlight: false   //不显示
            }
          }
]

如果是定制化的模板需要在v-step组件中传入

<v-step
  v-if="tour.currentStep === index"
  v-for="(step, index) of tour.steps"
  :key="index"
  :step="step"
  ...
  :highlight="tour.highlight"
>

默认是一个框


默认

如果需要修改可以修改class类.v-tour__target--highlighted

.v-tour__target--highlighted {
            box-shadow: 0 0 0 99999px rgba(0,0,0,.4);
        }
修改后

【完结】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,533评论 0 13
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,382评论 0 3
  • 前言 接上篇前端Js笔试题面试题,收集整理Vue相关的面试题,供自己现在和以后学习和面试,也希望能对点进来的小伙伴...
    蛙哇阅读 2,644评论 0 10
  • 那年兵荒马乱,人民流离失所,整座城池被一片黑暗所笼罩,曾经象征着权势和富有的楼阁,如今已是一片狼藉,没有了...
    陌上a离殇阅读 125评论 0 1
  • 今天Kevin带我们去了夏威夷有名的土菜馆,今晚做客小讲堂的老师是Leo和Alice,会跟大家讲到如何形容口感和味...
    午后窗台的猫阅读 533评论 0 0