hv-modal v0.0.8

hv-modal

Modal manager vuejs

Table of contents

• Installation
• Usage
• Example

Installation

npm install --save hv-modal

Default import

import Vue from 'vue'
import { ModalContainer } from 'hv-modal'

Vue.component('modal-container', ModalContainer)

Browser

<link rel="stylesheet" href="hv-modal/dist/hv-modal.css"/>

<script src="vue.js"></script>
<script src="hv-modal/dist/hv-modal.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Vue.component('modal-container', HVModal.ModalContainer)

Usage

ADD ModalContainer to root app

<template>
<div>
  <ModalContainer></ModalContainer>
  ...
</div>
</template>

<script>
import {ModalContainer} from 'hv-modal'

export default {
  name: 'app',
  components: {
    ModalContainer
  }
}
</script>

Open Modal

import {openModal, closeModal} from 'hv-modal'
import ItemForm from './ItemForm.vue'

// OPEN
let modal = openModal({component: ItemForm,bind: {},on:{}}, {
  title: 'Them moi',
  size: 'medium' // or small || large || full || tiny
})

// CLOSE
modal.close()

// OR
closeModal(modal)

Example

TODO

<template>
<div>
  <ModalContainer></ModalContainer>
  Test hvmodal
  <button @click.prevent="open">Open</button>
</div>
</template>

<script>
import {
  ModalContainer,
  openModal
} from 'hv-modal'

import ItemForm from './ItemForm.vue'

export default {
  name: 'app',
  components: {

    ModalContainer,
    ItemForm
  },

  methods: {
    open() {
      openModal({
        component: ItemForm
      }, {
        title: 'Them moi'
      })
    }
  }
}
</script>

License

MIT