el-tour 漫游式引导 vue

漫游导航

 html

<template>
<el-row>
 <el-button type="primary" @click="open">开始加载</el-button>
    <el-button ref="mt2">编辑</el-button>
    <el-button ref="mt3" type="primary">删除</el-button>
    <el-button ref="mt4" :icon="MoreFilled" />
</el-row>
 

  <el-tour v-model="mTour2.mtOpen2"
      type="primary"
      z-index="999999999"
      :mask="false"
      @change="changeTour2"
     >
      <el-tour-step :target="mTour2.mt2"
        title="登记"
        :description="mTour2Dssc.two1" />
        <el-tour-step :target="mTour2.mt3"
        title="编辑"
       :description="mTour2Dssc.two2" />
        <el-tour-step :target="mTour2.mt4"
        title="删除"
        :description="mTour2Dssc.two3" />
       
    </el-tour>
</template>

js

<script >
export default {
 data () {
    return {
     mTour2: {
        mtOpen2: false,
        mt1: null,
        mt2: null,
        mt3: null,
        mt4: null
      },
      mTour2Dssc:{
         two1:"点击登录按钮，根据弹窗上传需要登记的文件，且需接收人、提交人签字后提交至系统",
         two2:"选中一条未在流程中的材料数据，由负责人重新上传相关文件完成编辑操作",
         two3:"选中一条未在流程中的数据，删除后数据将进入回收站，在规定时间内可恢复数据",
         two4:"选中一条或多条数据，选择共享空间后确认后，其他有权限的审计员均可查阅访问该数据",
         two5:"选中一条或多条数据，可选择指派至全局用户或指定用户进行作业",
         two6:"包括文件OCR图像识别、文本摘要提取、自定义提取",
         two7:"选中一条纸质类型数据，填写相关借阅流程补录信息",
         two8:"选中一条数据，生成交接信息PDF供用户完成交接汇总表的最终归档",
      },
   }
 }
 methods: {
    changeTour2(val){
        console.log(val,"changeTour2");
       switch (val) {
       case 1:
         if (this.$refs.mt3) {
              this.mTour2.mt3 = this.$refs.mt3.ref
            }
        break;
      case 2:
         if (this.$refs.mt4) {
              this.mTour2.mt4 = this.$refs.mt4.ref
            }
       break;
      default:
        break;
      },

    },
    open(){
        if (this.$refs.mt2) {
              this.mTour2.mt2 = this.$refs.mt2.ref
              this.mTour2.mtOpen2 = true
            }
    },
 }
}
</script>