Question

模板：

<template>
  <b-button variant="link" class="btn-remove" @click="removeItemFromOrder(index)">
    Remove item
  </b-button>
</template>

具有自定义内容的脚本生成模式：

<script>
export default {
  name: "HelloWorld",
  methods: {
    removeItemFromOrder: async function (position) {
        let self = this

        const h = this.$createElement

        const titleVNode = h('div', { domProps: { innerHTML: '<h2>Remove this item?</h2>' } })

        const messageVNode = h('div', { class: ['modal-complete'] }, [

          h('div', {
            domProps: {
              innerHTML:  '<h2>Remove this item?</h2>'+
                          '<span class="popup-meta">'+
                            'Are you sure you want to remove this item?'+
                          '</span>'
            }
          })
        ])


        this.$bvModal.msgBoxConfirm([messageVNode], {
          title: [],
          centered: true,
          modalClass: 'success-popup',
          hideHeader:true,
          footerClass: 'd-flex justify-content-center align-items-center',
          cancelVariant: 'outline-danger',
          okVariant: 'danger',
          okTitle: 'YES',
          cancelTitle: 'NO',
          ststic: false
        })
          .then(async function (result) {
            if (result) {
              self.currentOrder.items.splice(position, 1)
              await self.sync()
            }
          })
          .catch(err => {
            // An error occurred
          })
      },
  }
};
</script>

打开附加到body后的引导程序模态。所以，这就是为什么我有一个问题：

如何将bootstrap-vue模态附加到#app或另一个template \标记？

P.S：仅适用于this.$bvModal.msgBoxConfirm和then ...以便不创建不必要的方法... 由于弹出式逻辑不同

Answer 1

这不可能如果您阅读了代码，则只需将Modal附加到主体上

https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/helpers/bv-modal.js#L150

  const div = document.createElement('div')
  document.body.appendChild(div)
  msgBox.$mount(div)

Answer 2

我遇到了同样的问题，并想出了一种解决方法。我使用的是引导程序的作用域版本，其中每个引导程序类都以.bootstrap-scope为前缀，以便引导程序样式不会干扰页面上的其他内容。这意味着将模式直接附加到主体将不起作用，因为它不会从.bootstrap-scope内部继承引导样式（并且我无法将bootstrap-scope类添加到主体）。

我已经加载了jquery，所以我的解决方案是通过立即隐藏新创建并附加到主体（不会正确显示）的模式来捕获$ bvModal.show（）事件，然后附加模态到我想要的容器。问题在于，在隐藏自定义容器时，需要将其从自定义容器中删除，因为show事件将重新创建它，并且会出现问题。

show_modal: function(viz) {
    var vm = this;              

    vm.$bvModal.show(vm.modalId); 
    $(`#${vm.modalId}___BV_modal_outer_`).hide(); 

    setTimeout(()=>{
        $(`#${vm.modalId}`).appendTo('#' + vm.containerId); 
        $(`#${vm.modalId}___BV_modal_outer_`).show(200); 
    }, 50); 

}



hide_modal: function() {
    this.$bvModal.hide(this.modalId}); 
    $(`#${this.containerId} .modal`).remove(); 
}

将bootstrap-vue模态附加到应用模板

2 个答案: