vue-js-modal | 一款基于vuejs2.x的模态窗口组件

vue-js-modal是一款基于vuejs2.x的模态窗口组件。它支持模态窗口的拉伸、移动、自定义尺寸、错误回调等，功能十分强大。

使用方法

安装

如果您想使用vue-js-modal模态窗口组件，首先您需要安装它，命令如下：

npm install vue-js-modal --save
// 或者
yarn add vue-js-modal
		

使用

全局引用

import VModal from 'vue-js-modal'
// 或者
import VModal from 'vue-js-modal/dist/index.nocss.js'
import 'vue-js-modal/dist/styles.css'

Vue.use(VModal)
		

静态模态窗口

<template>
    <modal name="my-first-modal">
        This is my first modal
    </modal>
</template>

export default {
    name: 'MyComponent',
    methods: {
        show () {
            this.$modal.show('my-first-modal');
        },
        hide () {
            this.$modal.hide('my-first-modal');
        }
    },
    mount () {
        this.show()
    }
}
		

动态模态窗口

// 语法：
this.$modal.show(
  component, // 模态窗口组件
  component_properties, // 组件使用的属性
  modal_properties, // 模态窗口使用的属性
  modal_events // 模态窗口的事件处理函数
)			
		

示例：

import MyComponent from './MyComponent.vue'

...

this.$modal.show(
  MyComponent,
  { text: 'This text is passed as a property' },
  { draggable: true }
)		
		

或者使用内联模板

this.$modal.show(
  {
    template: `
      <div>
        <h1>This is created inline</h1>
        <p>{{ text }}</p>
      </div>
    `,
    props: ['text']
  },
  { text: 'This text is passed as a property' },
  { height: 'auto' },
  { 'before-close': event => {} }
)
		

更多用法请参考官方网站：https://euvl.github.io/vue-js-modal/

github网址：https://github.com/euvl/vue-js-modal