0.0.9 • Published 4 years ago
simple-vuejs-modal v0.0.9
VueJS Modal
Simple And Flexible VueJs Modal
Getting Started
// installation via npm
npm i -S simple-vuejs-modal
// or
// installation via yarn
yarn add simple-vuejs-modal
Usage
SignIn.vue
<template>
<VueModal name="signIn">
<template slot="header">
Head
</template>
<template slot="body">
Body
</template>
</VueModal>
</template>
<script>
import VueModal from '@/simple-vuejs-modal.vue';
export default {
name: "SignIn",
components:{
VueModal
}
}
</script>
Home.vue
<template>
<div>
<SignIn />
<a href="#" @click.prevent="$modal.show('signIn')">Open Modal</a>
</div>
</template>
<script>
import SignIn from './SignIn';
export default {
name: "Home",
components:{
SignIn
}
}
</script>
<style scoped>
</style>
Open Modal
//In Script
this.$modal.show('signIn')
In Templete
$modal.show('signIn')
Close Modal
this.$modal.hide('signIn')
Dynamic modals
this.$modal.show(componentName', Properties)
For Example : this.$modal.show('signIn', {name: "Paul"})