Bootstrap Modal弹窗怎样被vue管理
时间: 2023-07-01 13:19:59 浏览: 200
要让Bootstrap Modal弹窗被Vue管理,可以使用Vue插件vue-js-modal。这个插件提供了一个Modal组件,可以方便地创建和管理弹窗。
首先,需要安装vue-js-modal插件。可以使用npm或yarn进行安装:
```
npm install vue-js-modal
```
或者
```
yarn add vue-js-modal
```
然后,在Vue的入口文件中,引入插件并注册:
```javascript
import Vue from 'vue'
import VModal from 'vue-js-modal'
Vue.use(VModal)
```
现在就可以在Vue组件中使用Modal组件了。例如,在一个按钮的点击事件中打开一个Modal弹窗:
```html
<template>
<div>
<button @click="showModal">打开弹窗</button>
<modal :name="'my-modal'">
<h2>Hello World!</h2>
</modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$modal.show('my-modal')
}
}
}
</script>
```
这个例子中,点击按钮会调用showModal方法,在showModal方法中,使用`this.$modal.show`方法打开名为"my-modal"的Modal弹窗。Modal组件的内容可以通过插槽进行定义,这个例子中使用了一个简单的标题。
以上是一个简单的实现,具体使用方式还可以查看vue-js-modal的官方文档。
阅读全文