hv-modal
v0.0.8
Published
Modal manager vuejs
Downloads
11
Readme
hv-modal
Modal manager vuejs
Table of contents
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>