创建多个模态

Question

我是Vue.js初学者...假设最简单的＆＃34;标准＆＃34; Vue的模态为https://vuejs.org/v2/examples/modal.html

但是没有ID或setter方法来改变模态体。我有很多按钮，每个按钮都会在模态中显示不同的格式（innerHTML）..但是只需要一个Vue的模态对象（如果只改变标题和内容就没有意义）...内容不是静态的是字符串或内部HTML形式的其他DOM对象。

编辑：正如我在讨论下，问题/解决方案的关键和问题可能是＆＃34;如何设置插槽？＆＃34;

最好的还是看this question/answer about set string into innerHTML of the slot。

<div id="app">

<button @click="showModal=true">Show Modal1</button>
<button @click="showModal=true">Show Modal2</button>


<modal v-if="showModal" @close="showModal = false">

    <!-- HOW TO CHANGE HERE??  DYNAMICALLY, ON FLY, 
       WITH PURE JAVASCRIPT

       WHEN click buttoom "Show Modal1" say "HELLO!"

       WHEN click buttoom "Show Modal2" say "BYE!"
        ... or get content from a web-service

    -->

    <h3 slot="header">custom header</h3>
  </modal>
</div>

Answer 1

它们都是slot，所以你可以参数化它们。

E.g。在父母：

  <modal v-if="showModal" @close="showModal = false">
    <h3 slot="header">custom header</h3>
    <p slot="body">custom body</p>
    <p slot="footer">
      <button class="modal-default-button" @click="showModal = false">
        OK
      </button>
    </p>
  </modal>

这会改变所有三个部分（页眉，正文和页脚）。

Updated JSFiddle here

创建多个模态

要创建多个，您可以根据需要设置<modal>个，只要您创建一个＆＃34; show＆＃34;每个变量（例如showModal）：

<button id="show-modal" @click="showModalOne = true">Show Modal One</button>

<button id="show-modal" @click="showModalTwo = true">Show Modal Two</button>

<modal v-if="showModalOne" @close="showModalOne = false">
...
</modal>

<modal v-if="showModalTwo" @close="showModalTwo = false">
...
</modal>

数据：

new Vue({
  el: '#app',
  data: {
    showModalOne: false,
    showModalTwo: false,
  }
})

Two modal JSFiddle here.

如何更改标准模式的内容？

1 个答案:

创建多个模态