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>