vue-modal-viewer
v0.1.9
Published
Show and hide your content in Vue
Downloads
3
Readme
vue-modal-viewer
Show and hide your content in Vue
Usage
Install
npm i vue vue-modal-viewer
Include plugin
import Vue from "vue";
import ModalViewerPlugin from "vue-modal-viewer";
Vue.use(ModalViewerPlugin);
Create component
<template>
<button @click="open">Open hidden content</button>
<modal :name="modalName" v-slot="{ isShowed }">
<h1 v-id="isShowed">My Visible Content</h1>
<button @click="hide">Hide</button>
</modal>
</template>
<script>
export default {
data(){
return {
modalName:"myModal",
}
},
methods:{
show(){
this.$modalviewer.show(this.modalName)
},
hide(){
this.$modalviewer.hide(this.modalName)
}
}
}
</script>
Mixins
<template>
<div v-if="isShowed">
<h1 v-id="isShowed">My Visible Content</h1>
<button @click="hide">Hide</button>
</div>
</template>
<script>
import { ModalViewer } from "vue-modal-viewer";
export default {
mixins:[ModalViewer.mixin],
props:{//Set default name
name:{
type:String,
default:"trstModal"
}
}
}
</script>
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build