webpack + vue 實現 彈窗功能

對于剛入門webpack + vue 不久的新人來說，這技術，確實有些不太友好，相比較于直接操縱dom元素的jQuery，直接操縱數據的 vue 在webpack框架下實現多級彈窗的效果，要麻煩很多。

需求背景：點擊地圖撒點，會有一個回調函數返回數據，然后需要根據返回的數據打開彈窗，顯示詳細內容。

一開始我是設置了一些全局的變量和方法，通過全局方法獲得回調函數返回的數據，然后再將此數據賦值給全局變量，以供所有頁面使用。

但是這里有兩個問題：

1.全局變量無法在Mustache（雙花括號）和 vue指令 里面使用，即：

v-if="popCon.show"　　　　? ?//控制彈窗顯示和隱藏　　　　　　　　　　popCon為popupController的縮寫，此變量用來控制彈窗的顯示隱藏

{{globalResult.name}}　　　　//使用回調函數返回的數據在彈窗中顯示　　globalResult為回調函數返回的數據，在頁面中展示

?

2.即使通過在data中使用 中間變量 來賦值使用，但是當全局變量的更新時，本地變量無法同步

data: {

　　localCon: popCon,

　　localResult: globalResult

}

v-if="localCon.show"

{{localCon.name}}　　　　　　//這種情況，當 popCon 和 globalResult 發生變化時，localCon 和?localResult 無法同步

在無法繞開這兩個問題的情況下，使用全局變量這種方式已經無法實現當前的需求。

所以，這里推薦使用 vuex 的全局變量來實現效果。

========================================

解決方案：

首先，在 vuex 的state中設置兩個全局變量

const state = {

　　popCon: {

　　　　controller1: false,　　　　//第一個彈窗顯示控制,可以通過給彈窗的 X ，添加點擊事件，賦值，來關閉窗口

　　　　controller2: false　　　 　//第二個彈窗顯示控制

　　},

　　globalResult: {　　　　　　? ? //此變量為回調函數返回的數據

　　　　name: "名稱"　　　　

　　}

}

然后，在相應的彈窗組件中使用這兩個全局變量來達到效果

v-if="$store.state.popCon.controller1"　　//顯示效果，控制組件的顯示效果，這里就不寫組件的代碼了

{{$store.state.globalResult.name}}　　　? //數據效果

現在這里都是默認的數據，然后需要在回調函數中給全局變量賦值

一般來說，我們都是直接給變量賦值，也就是?$store.state.globalResult = result

但是 vue 官方不推薦直接修改state的屬性

推薦我們使用mutations來修改state的屬性

function callback (result) {

　　vueObj.$store.commit('globalResult',result)　　//這里就不解釋 vuex 的 mutations的寫法了

　　vueObj.$store.commit('popCon',true)　　　　? //設置彈窗顯示為 true，打開彈窗　　這里的?popCon 是 mutations里面的一個方法名為?popCon 的函數，上一行 globalResult 同理

}

到這里，就已經實現了 通過vuex 來達到打開彈窗詳情界面的功能。

通過點擊某個地方，獲取數據，然后打開詳情頁面，顯示數據內容，點擊關閉按鈕關閉彈窗

如果需要實現多級詳情彈窗，可以在彈窗界面中嵌套使用。

?

轉載于:https://www.cnblogs.com/fannn/p/9489904.html

總結

以上是生活随笔為你收集整理的vue实现多级弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。