Vue2 tour的使用记录

介绍

记录Vue tour引导页组件的使用方法

什么是vue-tour

• vue-tour (opens new window) 是Vue专属的引导页组件 引导页就是会告诉用户这块是什么东东 然后一步一步的完成引导 一般引导页都是通过border来抠出来的 或者使用另一个引导组件(忘了) 那我们既然用Vue开发 正好可以用vue-tour (opens new window) 用到组件 这个组件很强大 支持插槽 支持选中组件等等 非常切合Vue

• 上面那个是他默认最基础的效果 vue-tour (opens new window) 它本身非常智能 可以自动实现上一步和中途跳出的功能 不过大部分公司不太需要中途跳出的功能

举例说明

• 我们那ui给的设计图来看看

• 看到ui给的这么漂亮的图 你肯定会说 你上面那个默认样式是什么垃圾 我们做项目不都得听ui和后端吗 这就体现vue-tour (opens new window) 强大之处了

实现步骤

• 先npm下载一下

npm install vue-tour

第一步 我们先在main.js入口注册一下

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')

第二步 在template里添加其组件 导入引导组件

• 默认的话 会显示结束引导 如果你不想让他显示结束引导 需要使用自带的插槽去定制并通过插槽去判断步骤(0 开始)
• 绑定盒子的时候 你可以用id或class还有它自带的data-v-step 都可以进行引导绑定 如果你想绑定你的组件中的某个盒子 需要深度绑定详细看 这里 (opens new window)
  • 我建议你可以整个透明色块background: transparent; 通过fixed来定位引到后隐藏 甚至都不需要隐藏 使用pointer-events: none;穿透点击都可以

 	<!-- 引导绑定左侧列表引导块 -->
    <div class="leftTour" id="v-step-0"></div>
    <!-- 引导绑定右下角登录盒子 -->
    <div class="rightTour" id="v-step-1"></div>
    <!-- 引导组件 -->
    <v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks">
      <!-- 使用插槽 -->
      <template slot-scope="tour">
        <transition name="fade">
            <!-- 这里的数据绑定不要随意修改 会影响一些默认功能 -->
          <v-step v-if="tour.steps[tour.currentStep]" :key="tour.currentStep" :step="tour.steps[tour.currentStep]" :previous-step="tour.previousStep" :next-step="tour.nextStep" :stop="tour.stop" :skip="tour.skip" :is-first="tour.isFirst" :is-last="tour.isLast" :labels="tour.labels">
            <!-- 可以通过 v-if="tour.currentStep 来判断引导的步骤 设置自己喜欢的样式 -->
            <template v-if="tour.currentStep === 0">
              <div slot="actions">
                <!-- 这里通过class设置你喜欢的样式和名字 -->
                <!-- nextStep是下一步事件 previousStep是上一步事件 skip是完成事件 通常会用到这些 -->
                <button @click="tour.nextStep" class="v-step__button">我知道了</button>
              </div>
            </template>
            <template v-if="tour.currentStep === 1">
              <div slot="actions">
                <button @click="tour.previousStep" class="v-step__button v-step__button_first">上一步</button>
                <button @click="tour.nextStep" class="v-step__button">我知道了</button>
              </div>
            </template>
            <template v-if="tour.currentStep === 2">
              <div slot="actions">
                <button @click="tour.previousStep" class="v-step__button v-step__button_first">上一步</button>
                <button @click="tour.nextStep" class="v-step__button">我知道了</button>
              </div>
            </template>
            <template v-if="tour.currentStep === 3">
              <div slot="actions">
                <button @click="tour.previousStep" class="v-step__button v-step__button_first">上一步</button>
                <button @click="tour.nextStep" class="v-step__button">我知道了</button>
              </div>
            </template>
            <template v-if="tour.currentStep === 4">
              <div slot="actions">
                <button @click="tour.previousStep" class="v-step__button v-step__button_first">上一步</button>
                <button @click="tour.skip" class="v-step__button">完成引导</button>
              </div>
            </template>
          </v-step>
        </transition>
      </template>
    </v-tour>

第三步 设置一下他的样式 让他和ui设计图一样

• 首先这个组件默认是没有引导阴影的 你需要单独在当前页面的style中添加一个css 这样就可以实现引导阴影效果 这个很关键 你不设置这个类 那么他只是一个边框效果
• 注意: 如果你给组件也要使用引导阴影当前页面 <style> 不要加scope 因为添加后只是当前页面唯一的class类(防止污染) 建议直接在<style>中设置即可 不要在scope 中去写

.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
}

• 然后我们通过::v-deep 深度选择器来选中他自带的样式 进行修改 如果你通过插槽设置的引导样式 就可以不用::v-deep深度选择器 我这里是都使用了深度
  • 这里讲个小知识 如果你的style使用了scoped(每个vue页面生成随机类名) 那么你想改组件样式 就需要使用::v-deep深度选择器 如果你没有加scoped 直接写的style 则需要注意层级问题 使用多层级 或者!important
  • 我们这里使用了scoped 所以需要加::v-deep 深度选择器

::v-deep .demoss {
  font-size: 30px;
  margin: 28px 50px 0px 50px;
}

::v-deep .line {
  position: relative;
  cursor: default;
}
::v-deep .v-step__content {
  margin-bottom: 40px;
}
::v-deep .line:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 60%;
  left: -0.35em;
  right: -0.35em;
  bottom: 0;
  transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
  background-color: #feecb2;
  border-radius: 20px;
}
::v-deep .textCenter {
  font-size: 18px;
  color: #666666;
  margin-top: 23px;
  cursor: default;
}
::v-deep .v-step {
  background: #ffffff;
  color: #000000;
  border-radius: 10px;
  max-width: none;
}
::v-deep .v-step__button {
  font-size: 20px;
  color: #fbc000;
  font-weight: 400;
  margin-bottom: 18px;
  margin-left: 12px;
  border-bottom: 2px solid #fbc000;
}
::v-deep .v-step__button_first {
  color: #999;
  font-size: 16px;
  border-bottom: 0px solid #fbc000;
}
::v-deep .v-step__button:hover {
  color: #fbc000;
}
/** 阴影样式 **/
.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
}.leftTour {
  position: fixed;
  width: 13.11%;
  min-width: 180px;
  height: 600px;
  background: transparent;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
}
/** 需要引导的盒子样式 **/
.rightTour {
  position: fixed;
  width: 13.11%;
  min-width: 180px;
  height: 190px;
  background: transparent;
  left: 0;
  bottom: 0;
  z-index: 100;
  pointer-events: none;
}

第四步 按照说明手册去写js 实现绑定引导绑定

• 这个组件的js写法十分的有意思 用惯了elementUI的人绑定一些回调事件的时候肯定喜欢直接@....这种方式去写 但这个组件是这样 (opens new window)设计回调函数的 你需要在组件上绑定:callbacks="myCallbacks"然后再data()中绑定你需要使用的方法
• 这个是他的回调方法的名称

onStart	开始回调
onPreviousStep	上一步回调
onNextStep	下一步回调
onSkip	跳过回调
onFinish	结束回调
onStop	停止回调

• 首先你想使用回调的各种方法 需要在v-tour组件上绑定:callbacks="myCallbacks"

<v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></v-tour>

• 然后需要在data()中设置 :callbacks设置的名称 和你在methods中的方法名 并且设置设置引导内容

  data () {
    return {
          myOptions: {
        // 是否启动键盘操控
        useKeyboardNavigation: true
      },
      // 引导样式和语数
      steps: [
        {
          // 绑定你设置的步骤名
          target: '#v-step-0',
          // 这里是导航提示的内容 支持div元素可以设置class
          content: `<div class="demoss"> <span class="line">导航服务栏</span> <br> <div class="textCenter">导航服务移动到这里啦，鼠标悬浮就可以查看哦~</div></div>`,
          params: {
            // 这里是设置在哪个位置显示 top right ......
            placement: 'right',
            // 是否启动阴影指导(如果你不设置阴影class 它实际上只有一个框框)
            highlight: true
          }
        },
        {
          target: '#v-step-1',
          content: `<div class="demoss"> <span class="line">登录账号</span> <br> <div class="textCenter">登录账户在这里，点击此处登录或切换账号哦~</div></div>`,
          params: {
            placement: 'right',
            highlight: true
          }
        },
        {
          target: '#v-step-2',
          content: `<div class="demoss"> <span class="line">任务申请待办</span> <br> <div class="textCenter">我的任务待办和我的申请都在这里咯~快来点击体验吧！</div></div>`,
          params: {
            placement: 'top',
            highlight: true
          }
        },
        {
          target: '#v-step-3',
          content: `<div class="demoss"> <span class="line">系统快捷入口</span> <br> <div class="textCenter">公司动态显示为最新消息，点击右侧可以查看公司所有动态哦~</div></div>`,
          params: {
            placement: 'top',
            highlight: true
          }
        },
        {
          target: '#v-step-4',
          content: `<div class="demoss"> <span class="line">最新公司动态</span> <br> <div class="textCenter">系统服务快捷入口都转移到这里啦~快来体验一下吧！</div></div>`,
          params: {
            placement: 'top',
            highlight: true
          }
        },
      ],
      // 引导回调的方法 格式:
      // 组件指定的回调方法: 你在methods中设置的方法
      myCallbacks: {
        onStart: this.isReady,
        onSkip: this.isOver,
        onFinish: this.isOver
      },
    }
  }

• 然后你就可以愉快的在methods中写你设置的方法
• 注意: 引导他不会自动开启 你自己设置启动(可以在mounted()中设置一个方法哦

// 启动引导的代码
   this.$tours['myTour'].start()

组件使用

• 如果我要在拆分的组件中使用引导怎么办
• 需要在params中设置highlight: true 组件穿透
• 注意: 如果你给组件也要使用引导阴影 当前页面 <style> 不要加scope 因为添加后只是当前页面唯一的class类(防止污染) 建议直接在<style>中设置即可 不要在scope 中去写

当前调用组件的页面 设置组件穿透

// 设置引导配置
{
          target: '#v-step-3',
          content: `<div class="demoss"> <span class="line">最新公司动态</span> <br> <div class="textCenter">系统服务快捷入口都转移到这里啦~快来体验一下吧！</div></div>`,
          params: {
            placement: 'top',
            // 设置组件穿透
            highlight: true
       }
},
// 建议当前页的<style>不要加scope唯一class类 会导致组件引导没有阴影
<style>
    .v-tour__target--highlighted {
      box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
     }
</style>

在组件中设置选中的类名

 <div class="gonggaocontion_box" id="v-step-3" />

最后补充

• 如果你的产品或ui是一个好说话不严格的人 你可以使用组件自带的默认按钮显示 比如说保留结束引导这个按钮 这样就可以不用通过插槽自定义按钮内容了 只需要统一改按钮名称即可 你可以到这里看看 (opens new window)如何改按钮名称( 默认按钮名是英文 )
• 我介绍的是自定义插槽的效果 默认他的按钮是自带结束引导的按钮( 我们项目不让带 ) 所以用到了这个组件的插槽功能 实现一个定制按钮的展示