j-vue-modal
v0.0.8
Published
Simple modal
Downloads
5
Readme
J-Vue-Modal
Vue3
For Vue3 use this.
install
$ npm install j-vue-mdoal
config
import ModalTest1 from "./components/ModalTest1";
import ModalTest2 from "./components/ModalTest2";
const modals = {
"_ModalTest1": ModalTest1,
"NameForFunction": ModalTest2
};
Vue.use(modal, {
modals: modals,
css:{
class: {
main: "modal-main-1",
back: "modal-back-1",
},
animation: "zoom"
}
});
setConfig
modals - object of Modal components.
Name of Field ("_ModalTest1", "NameForFunction") use for activate modal.
css - set style of Modal
css > main - set style for div that will be containe your components css > back - set style for background div.
For example: you should add this css class in your object
.modal-main-1{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.modal-back-1{
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
background: rgba(62, 62, 62, 0.5);
}
Animation
animations - set animations name of transition
.fade-enter .modal-a {
transform: translateY(100px);
}
css: {
class: {
main: "test-2-main",
back: ""
},
animation: "fade"
},
Method
open
this.$modal.open(NameComponent, ParamsForComponent, Config)
NameComponent is name of filed if modals object.
ParamsForComponent is object of value for youe component.
You can get params by this.$modal.params
Config is config object of onlye this modal iteration
return key of modal
close
this.$modal.close(NameComponent = undefined)
Close Modal. if NameComponent is not undefined, function will close modal only when NameComponent === last name of opened component.
update
this.$modal.update(params)
Update params for your modal
Property
key
When you open some component this value is increment.
params
Params for your modal
name
Name of current Modal