如何在没有按钮或 link 的页面加载时触发 Bootstrap-vue 模式?
How to trigger Bootstrap-vue modal on page load without button or link?
抱歉请求帮助,但我不知道如何让 bootstrap-vue modal 在页面加载时初始显示而不需要触发它带有一个按钮或 link.
谢谢。
您可以在 Vue 的 mounted
事件上打开它,而不是尝试在页面加载时打开模式。
从 Bootstrap-Vue 网站上的示例代码提升:
<template>
<div>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
}
},
mounted() {
this.showModal();
}
}
</script>
抱歉请求帮助,但我不知道如何让 bootstrap-vue modal 在页面加载时初始显示而不需要触发它带有一个按钮或 link.
谢谢。
您可以在 Vue 的 mounted
事件上打开它,而不是尝试在页面加载时打开模式。
从 Bootstrap-Vue 网站上的示例代码提升:
<template>
<div>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
}
},
mounted() {
this.showModal();
}
}
</script>