Vue 2.x的Bootstrap模式组件

vue2-bootstrap-modal (vue2-bootstrap-modal)

Bootstrap Modal Component for Vue 2.x.

Vue 2.x的Bootstrap模式组件。

Updated package to exclude bootstrap css and js, you need to install bootstrap-loader.

更新了软件包以排除bootstrap css和js，您需要安装bootstrap-loader。

安装 (Install)

npm install vue2-bootstrap-modal --save

用法 (Usage)

Require the component (globally or in another component)

需要组件(全局或在另一个组件中)

components: {
    'bootstrap-modal': require('vue2-bootstrap-modal')
},

Then in your template:

然后在您的模板中：

<div>
...
<bootstrap-modal ref="theModal" :need-header="false" :need-footer="false" :size="'large'" :opened="myOpenFunc">
<div slot="title">
    Your title here
</div>
<div slot="body">
    Your body here
</div>
<div slot="footer">
    Your footer here
</div>
</bootstrap-modal>
...
</div>

Finally call theModal.open() and theModal.close() whenever you need.

最后，在需要时调用theModal.open()和theModal.close() 。

文献资料 (Documentation)

Modal functions and callbacks are exposed through the ref variable

模态函数和回调通过ref变量公开

open() function (open() function)

Opens the modal

打开模态

close() function (close() function)

Closes the modal

关闭模态

打开的callback (opened callback)

Called after modal is opened. Pass your own method to be called

模态打开后调用。 传递自己的方法被调用

关闭callback (closed callback)

Called after modal is closed. Pass your own method to be called

模态关闭后调用。 传递自己的方法被调用

需要标头boolean (need-header boolean)

True if you need to show the header

如果需要显示标题，则为True

Default value is true

默认值为true

需要页脚boolean (need-footer boolean)

True if you need to show the footer

如果需要显示页脚，则为true

Default value is true

默认值为true

大小string (size string)

Use one of these values to change the modal size

使用这些值之一来更改模式大小

Value	Bootstrap class
small	modal-sm
medium	modal-md
large	modal-lg
full	modal-full

值	引导类
small	modal-sm
medium	modal-md
large	modal-lg
full	modal-full

Default value is empty

默认值为空

例 (Example)

See index.html for example use

请参阅index.html以获取示例使用

去做 (To-do)

Expose configuration, like backdrop darkness value

曝光配置，例如背景暗度值

构建设置 (Build Setup)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

翻译自: https://vuejsexamples.com/bootstrap-modal-component-for-vue-2-x/