先看效果圖

main.js中引入vue-tour

import VueTour from 'vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)

建一個登錄頁面
點擊導(dǎo)航助手按鈕，開始提示

<el-button type="primary" plain @click="startTour">導(dǎo)航助手</el-button>
<v-tour name="myTourLogin" :steps="steps" :options="myOptions"></v-tour>
<el-form>
   <el-form-item prop="orgName">
     <el-input data-v-step="0"
       placeholder="請選擇學(xué)校"
     />
   </el-form-item>
   <el-form-item>
     <el-input data-v-step="5" placeholder="賬號" />
   </el-form-item>
   <el-form-item>
     <el-input
       data-v-step="6"
       placeholder="密碼"
       />
   </el-form-item>
 </div>
  <el-form-item>
   <div style="display: flex">
     <el-input data-v-step="7"/>
     <img src="code.png"">
   </div>
 </el-form-item>
 <span data-v-step="8">登 錄</span>
</el-form>

選擇學(xué)校彈出框

 <el-dialog
      v-dialogDrag
      custom-class="selectDialog"
      title='請選擇學(xué)校'    >
      <el-form ref="form" :model="form" class="demo-ruleForm">
        <div data-v-step="1" style="display: flex">
          <el-form-item>
            <el-select placeholder="省級">
              <el-option/>
            </el-select>
          </el-form-item>
          <el-select placeholder="市級">
            <el-option/>
          </el-select>
          <el-select placeholder="縣/區(qū)級" clearable>
            <el-option/>
          </el-select>
        </div>
        <!--搜索-->
        <el-form-item>
          <el-input data-v-step="2"/>
        </el-form-item>
      </el-form>
      <!--學(xué)校列表-->
      <el-table data-v-step="3">
      </el-table>
      <div>
        <el-button>取 消</el-button>
        <el-button data-v-step="4">確 定</el-button>
      </div>
    </el-dialog>

data(){
  return{
    myOptions:{
    	dialogVisible: false,
        useKeyboardNavigation: false, //不使用->,<-
        labels: {
            buttonSkip: '跳過',
            buttonPrevious: '上一步',
            buttonNext: '下一步',
            buttonStop: '關(guān)閉'
          }
        },
        steps: [
          {
            target: '[data-v-step="0"]',
            content: `請選擇學(xué)校`,
            params: {
              placement: 'bottom',
            },
          },
          {
            target: '[data-v-step="1"]',
            content: `請選擇省、市、縣、學(xué)校類別`,
            params: {
              placement: 'top',
            },
            before: ()=> new Promise((resolve) => {
              this.dialogVisible = true  
              //選擇學(xué)校提示框里點擊‘下一步’，選擇學(xué)校彈框顯示，然后給出提示			
              resolve();  //請求成功后，才能給出‘請選擇省、市、縣、學(xué)校類別’提示框
            })
          },
          {
            target: '[data-v-step="2"]',
            content: `請輸入學(xué)校名稱,搜索學(xué)校名稱`,
            params: {
              placement: 'bottom',
            }
          },
          {
            target: '[data-v-step="3"]',
            content: `請選擇學(xué)校`,
            params: {
              placement: 'bottom',
            }
          },
          {
            target: '[data-v-step="4"]',
            content: `請點擊‘確定’`,
            params: {
              placement: 'bottom',
            },
            
          },
          {
            target: '[data-v-step="5"]',
            content: `請輸入正確的手機(jī)號`,
            params: {
              placement: 'bottom',
            },
            before: ()=> new Promise((resolve) => {
              this.dialogVisible = false
              resolve();
            })
          },+
          {
            target: '[data-v-step="6"]',
            content: `請輸入密碼，初始密碼格式為“'zhjy@”+“手機(jī)號后六位”`,
            params: {
              placement: 'bottom',
            }
          },
          {
            target: '[data-v-step="7"]',
            content: `請輸入驗證碼，如1+1=2，請輸入結(jié)果2`,
            params: {
              placement: 'bottom',
            }
          },
          {
            target: '[data-v-step="8"]',
            content: `請點擊‘登錄’`,
            params: {
              placement: 'bottom',
            }
          },
        ]
  }
}

methods: {
	startTour(){
      this.$tours['myTourLogin'].start()
    }
}

如果想要實現(xiàn)點擊一次導(dǎo)航助手，顯示提示，再次點擊，提示隱藏需要這么做
在data中添加isTourActive,在方法中判斷點擊

data(){
	return{
		isTourActive:false
	}
}
methods: {
function startTour(){
        if (this.isTourActive) {
        this.$tours['myTourLogin'].stop()
        } else {
          this.$tours['myTourLogin'].start()
        }
        this.isTourActive = !this.isTourActive
      }
}

如果不需要點擊‘導(dǎo)航助手’進(jìn)行提示，而是進(jìn)入頁面直接提示，只需要將方法寫在mounted中，文章來源地址http://www.zghlxwxcb.cn/news/detail-698236.html

mounted () {
    this.$tours['myTourLogin'].start();
  },

到了這里，關(guān)于vue-tour新手指導(dǎo)，點擊按鈕，進(jìn)行提示，再次點擊按鈕，提示隱藏，點擊下一步，彈框顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！