如何以编程方式在bootstrap-vue模式的主体和页脚中注入内容？

如果我理解正确，则您希望根据不同的状态组合显示模式内容。

如您的描述，应该有2种状态：

deleteState：指示是否开始删除

loadingState：指示是否正在等待服务器的响应

查看Bootstrap Vue Modal Guide，然后搜索keyword = 禁用内置按钮，您将看到我们可以使用cancel-disabled和ok-disabledprops控制默认的Cancel和OK按钮的禁用状态（或者您可以使用slot = modal-footer或modal-好的，模态取消。）。

其他道具你可以使用：ok-only，cancel-only，busy。

最后v-if用状态组合绑定和道具以显示内容。

像下面的演示：

Vue.config.productiOnTip= false
new Vue({
  el: '#app',
  data() {
    return {
      customer: {name: 'demo'},
      deletingState: false, // init=false, if pop up modal, change it to true
      loadingState: false // when waiting for server respond, it will be true, otherwise, false
    }
  },
  methods: {
    deleteCustomer: function() {
    	this.deletingState = false
      this.loadingState = false
      this.$refs.myModalRef.show()
    },
    proceedReq: function (bvEvt) {
    	if(!this.deletingState) {
        bvEvt.preventDefault() //if deletingState is false, doesn't close the modal
        this.deletingState = true
        this.loadingState = true
        setTimeout(()=>{
          console.log('simulate to wait for server respond...')
          this.loadingState = false
          this.deletingState = true
        }, 1500)
      } else {
      	console.log('confirm to delete...')
      }
    },
    cancelReq: function () {
    	console.log('cancelled')
    }
  }
})

.customer-name {
  background-color:green;
  font-weight:bold;
}

  Delete

  
    

      
Are you sure, you want to delete customer:{{customer.name}}
    
    

      

        Deleting customer {{customer.name}}
      
      

        Successfully deleted customer {{customer.name}}