tmyers273.vue-js-modal

Vue.js modal

Forked from https://github.com/euvl/vue-js-modal

Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal. http://vue-js-modal.yev.io/

(now works with SSR)

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

Install

npm install tmyers273.vue-js-modal --save

How to use

Include plugin in your main.js file.

import VueModal from 'tmyers273.vue-js-modal'

Vue.use(VueModal)

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');
  }
}

SSR

Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/tmyers273.vue-js-modal']
}

And your plugins/vue-js-modal.js will look like:

import Vue from 'vue'
import VModal from 'tmyers273.vue-js-modal/dist/ssr.index'

Vue.use(VModal)

For full demo please look at demo/server_side_rendering

Properties

Name	Required	Type	Default	Description
name	true	[String, Number]		Name of the modal
delay	false	Number	0	Delay between showing overlay and actual modal box
resizable	false	Boolean	false	If true, allows to resize modal window, keeping it in the center of the screen.
adaptive	false	Boolean	false	If true, modal box will try to adapt to the window size
draggable	false	[Boolean, String]	false	If true, modal box will be draggable.
transition	false	String		Transition name
classes	false	[String, Array]	'vue--modal'	Classes that will be applied to the actual modal box, if not specified, the default 'vue--modal' class will be applied
width	false	Number	600	Width
height	false	Number	300	Height
minWidth	false	Number	0	The minimum width to which modal can be resized
minHeight	false	Number	0	The minimum height to which modal can be resized
pivotX	false	Number (0 - 1.0)	0.5	Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window
pivotY	false	Number (0 - 1.0)	0.5	Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window

Events

Name	Description
before-open	Emits while modal is still invisible, but was added to the DOM
opened	Emits after modal became visible or started transition
before-close	Emits before modal is going to be closed. Can be stopped from the event listener calling event.stop() (example: you are creating a text editor, and want to stop closisng and ask user to correct mistakes if text is not valid)
closed	Emits right before modal is destoyed

Example:

<template>
  <modal name="example"
         :width="300"
         :height="300"
         @before-open="beforeOpen"
         @before-close="beforeClose">
    <b>{{time}}</b>
  </modal>
</template>
<script>
export default {
  name: 'ExampleModal',
  data () {
    return {
      time: 0,
      duration: 5000
    }
  },
  methods: {
    beforeOpen (event) {
      console.log(event)
      // Set the opening time of the modal
      this.time = Date.now()
    },
    beforeClose (event) {
      console.log(event)
      // If modal was open less then 5000 ms - prevent closing it
      if (this.time + this.duration < Date.now()) {
        event.stop()
      }
    }
  }
}
</script>

This example, initializes time variable every time the modal is being opened. And then forbits closing it for the next 5000 ms

Other

Close button

If you want to have a Close (x) button in the top-right corner, you can use "top-right" slot for it. There is deliberately no predefined Close button style - you will have to implement/use your own button.

Example:

<template>
  <modal name="foo">

    <div slot="top-right">
      <button @click="$modal.hide('foo')">
        ❌
      </button>
    </div>

    Hello, ☀️!

  </modal>
</template>

Draggable handler

Draggable property can accept not only Boolean but also String paramenters. With String value, you can specify a CSS selector to the element which will be a "handler" for dragging.

Example:

<modal name="bar" draggable=".window-header">
  <div class="window-header">DRAG ME HERE</div>
  <div>
     Hello, 🌎!
  </div>
</modal>

Developers

To run an example:

# Clone repo

git clone https://github.com/euvl/vue-js-modal.git

# Build main library

cd vue-js-modal
npm install
npm run build

# Build and run demo

cd demo
npm install
npm run dev