javascript - 将 bootstrap-vue 模式附加到应用程序模板
问题描述
我使用bootstrap-vue 模式:
在我的项目代码盒中:
模板:
<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
或另一个模板\标签?
PS:仅适用this.$bvModal.msgBoxConfirm
于then
...以免创建不必要的方法...由于逻辑不同的弹出窗口数量
解决方案
这是不可能的如果您阅读代码,它只是将 Modal 直接附加到正文
const div = document.createElement('div')
document.body.appendChild(div)
msgBox.$mount(div)
推荐阅读
- javascript - 如何使用jquery从两个输入中获取值
- javascript - 如何只触发一次服务器发送的事件?
- java - Apache Velocity:Velocity.getTemplate 无法加载 vm 文件
- c++ - 带有 enable_if 的模板特化
- kubernetes - 如何减小 Kubernetes 的体积?
- kubernetes - 如何在 Kubernetes 容器中安装 JProfiler 代理?
- javascript - 如何从 Salesforce Lightning 中的代理对象获取目标对象?
- android - java.lang.ClassCastException: android.view.AbsSavedState$1 不能转换为 android.widget.ScrollView$SavedState
- math - 两个月之间支付金额的演变
- python - 操作员 [] 的 Swig 警告抑制