Question

我制作了自己的模态组件，在de app页面上，我想显示2个按钮，但是他们使用的是第一个模态。我如何实现这一点，我弹出2个不同内容的模态？

我如何实现这一目标？

App.vue

<modal-decision v-on:decision="handleDirectImport" modalButtonText="title 1" modalTitle="Title 1" modalBody="Content 1" ></modal-decision>
<modal-decision v-on:decision="handleDirectImport" modalButtonText="title 2" modalTitle="Title 2" modalBody="Content 2" ></modal-decision>

Model.vue

<template>
    <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            {{ modalButtonText}}
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ modalTitle }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ modalBody}}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-success" @click="clickYes('yes')">ja</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">nee</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            modalTitle: String ,
            modalBody: String,
            modalButtonText: String,
        },
        methods: {
            clickYes(decision) {
                $('#exampleModal').modal('hide');
                this.$emit('decision', decision)
            }
        }
    }
</script>

可能的解决方案：

<modal-decision v-if="uploadstatus" modalId="example1"....
<modal-decision v-if="uploadstatus" modalId="example2"....

<button type="button" class="btn btn-primary" data-toggle="modal" :data-target="'#'+modalId">
    {{ modalButtonText}}
</button>

<div class="modal fade" :id="modalId" tabindex="-1"....

Answer 1

您可以使用refs并以编程方式触发模式。

在每个组件上添加一个引用和一个新的prop（例如modal-ref）以检索组件内的引用名称：

<modal-decision v-on:decision="handleDirectImport" modal-button-text="title 1" modal-title="Title 1" modal-body="Content 1" modal-ref="modal1" ref="modal1"></modal-decision>
<modal-decision v-on:decision="handleDirectImport" modal-button-text="title 2" modal-title="Title 2" modal-body="Content 2" modal-ref="modal2"  ref="modal2" ></modal-decision>

[Vue提示]：请注意，HTML属性不区分大小写并且camelCased props需要在使用in-DOM模板时使用它们的kebab-case等价物。您应该使用“modal-button-text”而不是“modalButtonText”。（与其他道具相同）

在您的组件中，在模态元素上添加一个新的ref并使用方法触发它：

<template>
  <div>
    <button type="button" class="btn btn-primary" @click="showModal()">
      {{ modalButtonText}}
    </button>

    <div class="modal fade" ref="exampleModal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <!-- Modal content here -->
    </div>
  </div>
</template>

props: {
  modalTitle: String,
  modalBody: String,
  modalButtonText: String,
  modalRef: String
},
methods: {
  showModal() {
    let element = this.$parent.$refs[this.modalRef].$refs.exampleModal
    $(element).modal('show')
  }
}

Fiddle example here

Answer 2

First, it is not a good idea to use JQuery lib in Vue. It will make your life complicated.

You can define one prop=modalButtons as one array, then the parent can pass the button spec to Modal component like [{'type':'close','text':'Close', 'action':function () {modal2 = false} }, {'type':'other','text':'Check', 'action':function () {/*check something*/} }]

Then v-modal will generate the buttons like below demo:

Vue.config.productionTip = false

Vue.component('v-modal', {

  template: `
        <!-- Modal -->
        <div class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" :class="value?'show':'fade'">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ modalTitle }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="computedCloseButton.action($event)">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ modalBody}}
                    </div>
                    <div class="modal-footer">

                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" v-for="(modalButton, index) in modalButtons" :key="index" @click="modalButton.action($event)">
                        {{ modalButton.text}}
                    </button>
                    </div>
                </div>
            </div>
        </div>`,
  props: {
      modalTitle: {
        type: String,
        default: ''
      },
      modalBody: {
        type: String,
        default: ''
      },
      value: {
        type: Boolean,
        default: false
      },
      modalButtons: {
        type: Array,
        default: () => [{'type':'close', 'text':'Close', 'action': function () {}}]
      }
  },
  computed: {
    computedCloseButton: function () {
      return this.modalButtons.find((item) => {
        return item.type === 'close'
      })
    }
  }
})
    
app = new Vue({
  el: "#app",
  data: {
    modal1: false,
    modal2: false
  },
  methods: {
    openModals: function () {
      this.modal1 = true
      this.modal2 = true
    },
    checkSomething: function () {
      console.log('check something')
    }
  }
})

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <button @click="openModals()">Open Both Modals</button>
  <v-modal modal-title="Test1" modal-body="I am test1" :modal-buttons="[{'type':'close','text':'Close', 'action':function () {modal1 = false} }]" v-model="modal1"></v-modal>
  <v-modal modal-title="Test2" modal-body="I am test2" :modal-buttons="[
{'type':'other','text':'Check', 'action':checkSomething},
{'type':'close','text':'Close', 'action':function () {modal2 = false}}]" v-model="modal2"></v-modal>
</div>

Vuejs在同一页

2 个答案: