vue-modal2 v0.3.0

vue-modal2

Simple Vue Modal

Demo

Demo

Usage

Install:

npm install vue-modal2

Import:

// main.js
import Vue from 'vue'
import VModal2 from 'vue-modal2'
import 'vue-modal2/dist/vue-modal2.css'

Vue.use(VModal2)

Use:

<!-- app.vue -->
<template>
  <div>

    <button @click="$modal2.show('greet')">
      Show Modal
    </button>

    <v-modal2 name="greet">
      Welcome!
    </v-modal2>

  </div>
</template>

Advanced Usage (Reusable Modal)

1. Write an component that wrap your reusable modal:

<!-- modal-alert.vue -->
<template>
  <v-modal2 ref="modal">
    <div style="padding: 10px">
      <h2 style="margin: 5px 0 10px;">{{ title }}</h2>
      <div>{{ message }}</div>
      <button
        style="display: block; width: 100%; padding: 5px; margin-top: 10px;"
        @click="$refs.modal.hide()"
      >OK</button>
    </div>
  </v-modal2>
</template>

<script>
export default {
  props: {
    message: { type: String, required: true },
    title: { type: String, default: 'Warning' },
  },
}
</script>

2. Import and register it:

// main.js
import ModalAlert from './modal-alert.vue'

Vue.use(VModal, {
  register: {
    'alert': ModalAlert,
  },
})

3. Show the modal in any vue component:

// app.vue
this.$modal2.alert({
  message: 'Are you OK?',
})

API

Vue.prototype.$modal2

• show(name): Show the modal with name name;
• hide(name): Hide the modal with name name;
• <modalName>(props): Show the globally registered reusable modal;

<v-modal2> props

<v-modal2> events

• before-open
• opened
• before-close
• closed

License

MIT