如何在 bootstrap vue 中与 modal 进行通信

Question

我有一个复杂的模态，我已将其放入它自己的组件中。它适用于传递模型的副本，以允许用户取消操作。

<template>
  <b-modal
    v-if="itemCopy"
    v-model="shown"
    @cancel="$emit('input', null)"
    @ok="$emit('input', itemCopy)"
  >
  <!-- content -->
  </b-modal>
</template>

<script>
export default {
  props: {
    value: Object
  },
  data() {
    return {
      shown: false,
      itemCopy: null
    };
  },
  watch: {
    value(itemToDisplay) {
      this.shown = !!itemToDisplay;
      this.initValue();
    },
    item(it) {
      this.initValue();
    }
  },
  methods: {
    initValue() {
      this.itemCopy = _.cloneDeep(this.value);
    }
  }
};
</script>

与之通信的想法是在 v-model 中传递一个对象，如果设置，模态将使用该数据显示，完成后，新状态将通过 v-model 传回好吧。

也就是说，如果用户取消/关闭了modal，则v-modal变量将为null，否则它将是一个新的Model，将替换v-modal中的那个。

<template>
  <!-- omitted for brevity -->
  <ItemModal v-model="modalItem" />
<template>
<script>
//...
export default {
  data() {
    return {
      itemNumber: null
    };
  },
  computed: {
    modalItem:{
      get() {
        if (this.itemNumber != null) return this.entries[this.itemNumber];
      },
      set(newItem) {
        if (newItem && this.itemNumber) {
          //splice, etc.
        }
        // in any clase reset the selection to close the modal
        this.itemNumber = null;
      }
    },
//...
<script>

我遇到的问题是来自b-modal 的事件。我可以使用@ok，但没有@notOk。 例如@cancel 不会在用户点击模态框外被抛出。

如何做到这一点？还有其他更简单的方法吗？

Answer 1

<template>
  <b-modal
    :id="id"
    @ok="$emit('ok', item)"
  >
  <!-- content -->
  </b-modal>
</template>

<script>
export default {
  props: {
    item: Object,
    id: String
  }
};
</script>

<template>
  <!-- omitted for brevity -->
  <ItemModal :item="modalItem" :id="modalId" @ok="onModalOk" />
<template>
<script>
//...
export default {
  data() {
    return {
      modalId:  "myItemModal"
      itemNumber: null
      modalItem: null
    };
  },
  methods: {
    showItemModal(itemNumber) {
      this.itemNumber = itemNumber
      this.modalItem = _.cloneDeep(this.entries[itemNumber])
      this.$bvModal.show(this.modalId)
    },
    onModalOk(newItem) {
      if (newItem && this.itemNumber) {
        //splice, etc.
      }
    }
  }
//...
<script>

Answer 2

b-modal 发出一个通用的hide 事件，它的第一个参数接收关闭模式的触发器（即ok、cancel、esc、backdrop 等）：

<template>
  <b-modal
    v-if="itemCopy"
    v-model="shown"
    @hide="handleHide"
  >
  <!-- content -->
  </b-modal>
</template>

<script>
export default {
  // ...
  methods: {
    // ...
    handleHide(bvEvt) {
      if (bvEvt.trigger === 'ok') {
        // User clicked OK button
        this.$emit('input', this.itemCopy)
      } else {
        // The modal was closed not via the `ok` button
        this.$emit('input', null)
      }
    }
  }
};
</script>