Vue

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 来达到打开弹窗详情界面的功能。

通过点击某个地方，获取数据，然后打开详情页面，显示数据内容，点击关闭按钮关闭弹窗

如果需要实现多级详情弹窗，可以在弹窗界面中嵌套使用。