快捷導航

vue2.0 實現(xiàn)頁面導航提示引導的方法

更新時間：2018年03月13日 15:19:30 作者：yyjourney

下面小編就為大家分享一篇vue2.0 實現(xiàn)頁面導航提示引導的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

用戶在進行一些新的操作流程時，提供一些導航流程也是必要的。項目中采用的是iview 的對話框進行實現(xiàn)的。

demo：

  <Modal v-if="modalOFF === 1">
  <p>這里是對話框一</p>
  <button @click="modalOFF = 2"></button>
  </Modal>
  <Modal v-if="modalOFF === 2">
  <p>這里是對話框二</p>
  <button @click="modalOFF = 3"></button>
  </Modal>
  <Modal v-if="modalOFF === 3">
  <p>這里是對話框二</p>
  <button @click="modalOFF = null"></button>
  </Modal>

js代碼：

讓誰先顯示，就在data中定義modalOFF的屬性值。默認是
 modalOFF: 1,

當modalOFF為null的時候，對話框也就消失了。

以上這篇vue2.0 實現(xiàn)頁面導航提示引導的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 詳情跳轉(zhuǎn)至列表頁實現(xiàn)列表頁緩存
這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁實現(xiàn)列表頁緩存，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
element表單使用校驗之校驗失效問題詳解
最近工作中遇到了element表單校驗失敗的情況,通過查找相關(guān)資料終于解決了,所以下面這篇文章主要給大家介紹了關(guān)于element表單使用校驗之校驗失效問題的相關(guān)資料,需要的朋友可以參考下
2022-10-10
基于Vue2.0和Typescript實現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實現(xiàn)多主題切換的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue使用axios接收流文件的實現(xiàn)
本文主要介紹了vue使用axios接收流文件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
VUE前端如何處理后端接口返回的圖片詳解
在現(xiàn)代Web開發(fā)中,前端應用經(jīng)常需要從后端接口獲取圖片數(shù)據(jù),下面這篇文章主要介紹了VUE前端如何處理后端接口返回的圖片的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
vue下的elementui輪播圖自適應高度問題
這篇文章主要介紹了vue下的elementui輪播圖自適應高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
在vue中使用Echarts畫曲線圖的示例
這篇文章主要介紹了在vue中使用Echarts畫曲線圖的示例，幫助大家在vue中繪制圖表，感興趣的朋友可以了解下
2020-10-10
vue3如何優(yōu)雅的實現(xiàn)移動端登錄注冊模塊
這篇文章主要給大家介紹了關(guān)于vue3如何優(yōu)雅的實現(xiàn)移動端登錄注冊模塊的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
Vue下路由History模式打包后頁面空白的解決方法
這篇文章主要介紹了Vue下路由History模式打包后頁面空白，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
解決vue.js this.$router.push無效的問題
今天小編就為大家分享一篇解決vue.js this.$router.push無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09