Question

我目前正在研究工作中使用Vue.JS。

目前我主要从事前端方面的工作。我有一个包含几个条目的表，在点击该行时，我想要一个模态弹出窗口显示该行的更多详细信息。

我只是想让多个弹出窗口正常工作，并且一旦正常工作，它将在每个弹出窗口中处理动态内容。

目前，第一行的工作方式如下所示：

<tr class="activate-popupmodal-tr" @click="showmodal = true">
                      <td>01/01/2016

                        <modal :show.sync="showmodal">

                          <h3 slot="header">
                            Bug #1 - <span> 04/07/2016 </span>

                            <img src="files/cross.jpg" @click="showmodal = false" />
                          </h3>


                          <div slot="body">
                          </div>

                          <div slot="footer">
                         </div>

                        </modal>
</tr>

app.js为：

Vue.component('modal', {
  template: '#dashboard-popup-template',
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true
    }
  }
})

new Vue({
  el: '.activate-popupmodal-tr',
  data: {
    showmodal: false
  }
})

这可行，但只在一行上。关于如何让它发挥作用的任何想法？

表：https://jsfiddle.net/a6n04o3t/

Answer 1

Vue非常灵活，因此您可以通过多种不同的方式显示模态。这是我经常使用的方式之一。

可以找到工作演示（包括一些丑陋的样式）here on webpackbin。

首先我从一个父vue实例开始，该实例将保存我的列表组件，模态组件和我的项目列表（实际上在这种情况下，项目列表可以存储在父组件或列表组件中，但是可能你会想要它在父母身上）：

// in main.js

new Vue({
  el: 'body',
  components:{
    list: List,
    modal: Modal
  },
  data:{
    items:[
      {name: 'foo'},
      {name: 'bar'},
      {name: 'baz'}
    ]
  },
  events:{
    showModal: function(item){
      this.$broadcast('showModal', item)
    }
  }
})

它还包含一个桥接事件，即一个事件的目的是监听来自子组件的$dispatch ed事件，并立即$broadcasts对不同子组件的相应事件，如果需要，将数据与其一起传递。我们稍后会详细介绍这一点。

我的索引文件将包含list和modal组件的占位符，这些组件将被每个相应组件的模板替换：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
        ...
    </style>
  </head>
  <body>
    <div class="list-container">
      <list :items="items"></list>
    </div>

    <modal></modal>

    <script src="main.js"></script>
  </body>
</html>

注意第<list :items="items"></list>行。在这里，我们将items从父组件传递到list组件。

然后我创建将显示我的列表的列表组件：

// also in main.js

var List = Vue.component('list',{
  props:['items'],
  template: `
<div class="list-row" v-for="item in items" @click="showModal(item)">
  <span>{{ item.name }}</span>
</div>
`,
  methods:{
    showModal: function(item){
      this.$dispatch('showModal', item)
    }
  }
})

列表组件将items作为属性，以便它可以通过列表组件模板中的v-for="item in items"显示每个项目。

对于列表中呈现的每一行，我附加一个调用方法showModal的click事件，并将当前item传递给它。然后，该方法将showModal事件调度到父级。

这是父母的桥接事件进入的地方。父母的showModal事件从列表中听到调度并立即向所有孩子广播showModal事件，通过当前的项目。

唯一拥有showModal事件监听器的孩子是modal组件：

// also in main.js 

var Modal = Vue.component('modal',{
  template:`
<div class="modal-container" v-show="visible">
  <div class="modal-body">
    <div clas="modal-content">
      {{ item | json }}  
    </div>
    <button @click="closeModal">Close</button>
  </div>
</div>
`,
  data: function(){
    return {
      item: null,
      visible: false
    }
  },
  events:{
    showModal: function(item){
      this.item = item
      this.visible = true
    }
  },
  methods:{
    closeModal: function(){
      this.visible = false
      this.item = null
    }
  }
})

当模态组件检测到showModal已从父节点广播时，它会触发它的showModal事件逻辑，该逻辑将传入的项目设置为本地道具（它给出了modal的模板访问权限）并将可见性设置为true。

我做这种模式来显示模态，加载蒙版，通知等。

如果您对此方法有任何疑问，请与我们联系。

多个模态弹出窗口vue.js

1 个答案: