Vue常用弹出框类组件（持续更新）

🐰
…

书签

npm：https://www.npmjs.com/package/vue-js-modal

Demo: http://vue-js-modal.yev.io/

1	npm install vue-js-modal --save

main.js 文件

1
2
3

import VModal from 'vue-js-modal'
 
Vue.use(VModal)

1 2	// 默认组件名为 "modal"，如果需要自定义则： Vue.use(VModal, { componentName: "foo-modal" })

组件中使用：

1	<foo-modal name="bar"></foo-modal>

Create modal:

1
2
3

<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:

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

And receive it in beforeOpen event handler:

<modal name="hello-world" @before-open="beforeOpen"/>
methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

查看demo演示：http://vue-js-modal.yev.io/

1
2