代码之家 › 专栏 › 技术社区 › Bas

Vuejs在同一页上使用模态组件两次

vuejs2 vue.js javascript

Bas · 技术社区 · 8 年前

我制作了自己的模态组件,在de-app页面上,我想显示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>

模型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"....

2 回复 | 直到 8 年前

Sphinx 8 年前

首先,在vue中使用jquery lib不是一个好主意。它会让你的生活变得复杂。

可以将一个prop=modalButtons定义为一个数组,然后父节点可以将按钮规范传递给模式组件,如 [{'type':'close','text':'Close', 'action':function () {modal2 = false} }, {'type':'other','text':'Check', 'action':function () {/*check something*/} }]

然后v-model将生成如下演示按钮:

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>

Sovalina 8 年前

你可以使用 refs 以编程方式触发模态。

在每个组件上添加一个ref和一个新的prop( modal-ref 例如)要检索组件内的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 tip]:注意html属性不区分大小写,camelcase属性需要在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