vue.2.4.0.js_简单易用且高度可定制的Vue.js 2.0模式

vue.2.4.0.js

Vue.js模态 (Vue.js modal)

Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with SSR support.

具有SSR支持的易于使用，高度可定制的，移动友好的Vue.js 2.0+模式。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install vue-js-modal --save

如何使用 (How to use)

Include plugin in your main.js file.

在main.js文件中包含插件。

import VModal from 'vue-js-modal'

Vue.use(VModal)

/*
By default plugin will use "modal" name for the component.
If you need to change it, you can do so by providing "componentName" param.

Example:

Vue.use(VModal, { componentName: "foo-modal" })
...
<foo-modal name="bar"></foo-modal>
*/

Create modal:

创建模式：

<modal name="hello-world">
  hello, world!
</modal>

Call it from anywhere in the app:

从应用程序中的任何位置调用它：

methods: {
  show () {
    this.$modal.show('hello-world');
  },
  hide () {
    this.$modal.hide('hello-world');
  }
}

---

---

You can easily send data into the modal:

您可以轻松地将数据发送到模式：

this.$modal.show('hello-world', { foo: 'bar' })

And receive it in beforeOpen event handler:

并在beforeOpen事件处理程序中接收它：

<modal name="hello-world" @before-open="beforeOpen"/>

methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

If you use Bower package manager - you will have to initialize library differently:

如果使用Bower软件包管理器-您将必须以不同的方式初始化库：

Vue.use(window["vue-js-modal"].default);

对话 (Dialog)

It is a simplified version of the modal, which has most parameters set by default and is pretty useful for quick prototyping, showing alerts or creating mobile-like modals.

它是模式的简化版本，默认情况下设置了大多数参数，对于快速原型制作，显示警报或创建类似移动设备的模式非常有用。

To start using <v-dialog/> you must set dialog: true in plugin configuration:

要开始使用<v-dialog/> ，必须在插件配置中设置dialog: true ：

Vue.use(VModal, { dialog: true })

A