bootstrap vue中如何与模态通信

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- 传回模型也是。

也就是说，如果用户cancel/closed模态，v-modal变量将为null，否则它将是一个新模型，将替换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>

bootstrap vue中如何与模态通信

How to communicate with modal in bootstrap vue

vue.js

bootstrap-vue