<div><b-buttonv-b-modal.modal-1>Launch demo modal</b-button><b-modalid="modal-1"title="BootstrapVue"><pclass="my-4">Hello from modal!</p></b-modal></div>
<div><!-- Using modifiers --><b-buttonv-b-modal.my-modal>Show Modal</b-button><!-- Using value --><b-buttonv-b-modal="'my-modal'">Show Modal</b-button><!-- The modal --><b-modalid="my-modal">Hello From My Modal!</b-modal></div>
<div><b-buttonid="show-btn" @click="$bvModal.show('bv-modal-example')">Open Modal</b-button><b-modalid="bv-modal-example"hide-footer><templatev-slot:modal-title>
Using <code>$bvModal</code> Methods
</template><divclass="d-block text-center"><h3>Hello From This Modal!</h3></div><b-buttonclass="mt-3"block @click="$bvModal.hide('bv-modal-example')">Close Me</b-button></b-modal></div>
<template><div><b-buttonid="show-btn" @click="showModal">Open Modal</b-button><b-buttonid="toggle-btn" @click="toggleModal">Toggle Modal</b-button><b-modalref="my-modal"hide-footertitle="Using Component Methods"><divclass="d-block text-center"><h3>Hello From My Modal!</h3></div><b-buttonclass="mt-3"variant="outline-danger"block @click="hideModal">Close Me</b-button><b-buttonclass="mt-2"variant="outline-warning"block @click="toggleModal">Toggle Me</b-button></b-modal></div></template><script>exportdefault {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
},
toggleModal() {
// We pass the ID of the button that we want to return focus to// when the modal has hiddenthis.$refs['my-modal'].toggle('#toggle-btn')
}
}
}
</script>
<div><b-buttonv-b-modal.modalPopover>Show Modal</b-button><b-modalid="modalPopover"title="Modal with Popover"ok-only><p>
This
<b-buttonv-b-popover="'Popover inside a modal!'"title="Popover">Button</b-button>
triggers a popover on click.
</p><p>
This <ahref="#"v-b-tooltiptitle="Tooltip in a modal!">Link</a> will show a tooltip on
hover.
</p></b-modal></div>
<div><b-buttonv-b-modal.modal-xlvariant="primary">xl modal</b-button><b-buttonv-b-modal.modal-lgvariant="primary">lg modal</b-button><b-buttonv-b-modal.modal-smvariant="primary">sm modal</b-button><b-modalid="modal-xl"size="xl"title="Extra Large Modal">Hello Extra Large Modal!</b-modal><b-modalid="modal-lg"size="lg"title="Large Modal">Hello Large Modal!</b-modal><b-modalid="modal-sm"size="sm"title="Small Modal">Hello Small Modal!</b-modal></div>
size属性将大小映射到.modal-<size>类。
滚动长内容
当modals对于用户的视窗或设备太长时,它们会独立于页面本身滚动。试试下面的演示看看我们的意思。
<div><b-buttonv-b-modal.modal-tall>Launch overflowing modal</b-button><b-modalid="modal-tall"title="Overflowing Content"><pclass="my-4"v-for="i in 20":key="i">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p></b-modal></div>
您还可以通过将属性scrollable设置为true来创建一个可滚动的模式,该模式允许模式体滚动。
<div><b-buttonv-b-modal.modal-scrollable>Launch scrolling modal</b-button><b-modalid="modal-scrollable"scrollabletitle="Scrollable Content"><pclass="my-4"v-for="i in 20":key="i">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p></b-modal></div>
<div><b-buttonv-b-modal.modal-no-backdrop>Open modal</b-button><b-modalid="modal-no-backdrop"hide-backdropcontent-class="shadow"title="BootstrapVue"><pclass="my-2">
We've added the utility class <code>'shadow'</code>
to the modal content for added effect.
</p></b-modal></div>
<div><b-buttonv-b-modal.modal-footer-sm>Small Footer Buttons</b-button><b-buttonv-b-modal.modal-footer-lg>Large Footer Buttons</b-button><b-modalid="modal-footer-sm"title="BootstrapVue"button-size="sm"><pclass="my-2">This modal has small footer buttons</p></b-modal><b-modalid="modal-footer-lg"title="BootstrapVue"button-size="lg"><pclass="my-2">This modal has large footer buttons</p></b-modal></div>
<template><b-button @click="$bvModal.show('modal-scoped')">Open Modal</b-button><b-modalid="modal-scoped"><templatev-slot:modal-header="{ close }"><!-- Emulate built in modal header close button action --><b-buttonsize="sm"variant="outline-danger" @click="close()">
Close Modal
</b-button><h5>Modal Header</h5></template><templatev-slot:default="{ hide }"><p>Modal Body with button</p><b-button @click="hide()">Hide Modal</b-button></template><templatev-slot:modal-footer="{ ok, cancel, hide }"><b>Custom Footer</b><!-- Emulate built in modal footer ok and cancel button actions --><b-buttonsize="sm"variant="success" @click="ok()">
OK
</b-button><b-buttonsize="sm"variant="danger" @click="cancel()">
Cancel
</b-button><!-- Button with custom close trigger value --><b-buttonsize="sm"variant="outline-secondary" @click="hide('forget')">
Forget it
</b-button></template></b-modal></template>
<div><b-buttonv-b-modal.modal-multi-1>Open First Modal</b-button><b-modalid="modal-multi-1"size="lg"title="First Modal"ok-onlyno-stacking><pclass="my-2">First Modal</p><b-buttonv-b-modal.modal-multi-2>Open Second Modal</b-button></b-modal><b-modalid="modal-multi-2"title="Second Modal"ok-only><pclass="my-2">Second Modal</p><b-buttonv-b-modal.modal-multi-3size="sm">Open Third Modal</b-button></b-modal><b-modalid="modal-multi-3"size="sm"title="Third Modal"ok-only><pclass="my-1">Third Modal</p></b-modal></div>
<template><div><b-button @click="showMsgOk">Show OK message box with custom content</b-button></div></template><script>exportdefault {
methods: {
showMsgOk() {
const h = this.$createElement
// Using HTML stringconst titleVNode = h('div', { domProps: { innerHTML: 'Title from <i>HTML<i> string' } })
// More complex structureconst messageVNode = h('div', { class: ['foobar'] }, [
h('p', { class: ['text-center'] }, [
' Flashy ',
h('strong', 'msgBoxOk'),
' message ',
]),
h('p', { class: ['text-center'] }, [h('b-spinner')]),
h('b-img', {
props: {
src: 'https://picsum.photos/id/20/250/250',
thumbnail: true,
center: true,
fluid: true, rounded: 'circle'
}
})
])
// We must pass the generated VNodes as arraysthis.$bvModal.msgBoxOk([messageVNode], {
title: [titleVNode],
buttonSize: 'sm',
centered: true, size: 'sm'
})
}
}
}
</script>
通过$root事件监听模式更改
要监听任何模式打开,请使用:
exportdefault {
mounted() {
this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
console.log('Modal is about to be shown', bvEvent, modalId)
})
}
}
<b-modal @shown="focusMyElement"><div><b-button>I Don't Have Focus</b-button></div><div><b-form-input></b-form-input></div><div><!-- Element to gain focus when modal is opened --><b-form-inputref="focusThis"></b-form-input></div><div><b-form-input></b-form-input></div></b-modal>
<b-modalid="some-modal-id"title="Modal with TinyMCE Editor"ignore-enforce-focus-selector=".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root"
><!-- Modal content with TinyMCE editor here --></b-modal>