vue-modal-router
v0.6.1
Published
elegant to manage spa modals
Downloads
67
Maintainers
Keywords
Readme
vue-modal-router
elegant to manage spa modals
0.6.0
- async modal support
{
modals:{
AsyncModal:()=>import('./test/async-modal.vue')
},
methods:{
onClick(){
this.$modalRouter.push({
name:'async-modal' // this will load script then open the modal
})
}
}
}
0.5.1
- add modalRouter.closeAll()
- fix close custom modal bug
{
methods:{
onClick(){
this.$modalRouter.closeAll()
}
}
}
0.5.0
- add modalRouter.close() method
const mid = this.$modalRouter.push({
name: "test"
});
this.$modalRouter.close(mid);
Breaking Change
- 0.4.0 is differenet to 0.3.x
- [delay] and [model] is config in Vue.use()
- suport component level modals,friendly for dyamicImport,to impress performance
install
npm install vue-modal-router
vue-modal-router
use modals like vue-router style way
install
modal component
<template>
<!-- your modal component -->
<modal v-model="show">
<h1>something</h1>
<button @click="onTest">test</button>
</modal>
</template>
<script>
export default {
props: ["a", "b"],
data() {
return {
show: false
};
},
methods: {
onTest() {
this.$emit("test");
}
}
};
</script>
App.vue
<template>
<div id="app">
<router-view></router-view>
<!-- modal placeholder -->
<modal-router-view></modal-router-view>
</div>
</template>
import Vue from "vue";
import VueModalRouter from "vue-modal-router";
import CustomEdit from "./custom-edit.vue";
Vue.use(VueModalRouter, {
model: "show", // this should be equal to modal component model name
delay: 300 // delay time to destroy modal instance
});
const modalRouter = new VueModalRouter({
CustomEdit // now modal name can be 'CustomEdit' or 'custom-edit',it will try pascal name
});
new Vue({
el: "#app",
modalRouter
});
then in page component
<template>
<!-- button to open modal -->
<button v-modal-link="{name: 'custom-edit' }">open custom edit modal</button>
</template>
pass props to modal
<template>
<!-- button to open modal -->
<button
tag="button"
v-modal-link="{name: 'custom-edit',props: {a: 1, b: 2} }"
>
open custom edit modal
</button>
</template>
with event
<template>
<!-- button to open modal -->
<button v-modal-link="{ name: 'custom-edit', on: {test: onModalTest } }">
open custom edit modal
</button>
</template>
<script>
export default {
methods: {
onModalTest() {
console.log("get modal event here");
}
}
};
</script>
use manual api to open a modal
<template>
<div>
<button @click="onOpen">
open
</button>
</div>
</template>
<script>
export default {
methods: {
onModalTest() {
console.log("test here");
},
onOpen() {
const mid = this.$modalRouter.push({
name: "custom-edit",
props: { a: 1, b: 2 },
on: {
test: this.onModalTest
}
});
setTimeout(() => {
this.$modalRouter.close(mid);
}, 2000);
}
}
};
</script>
dyamic modals,now you can import modals only in component what you need no need to import all modals at ones
<template>
<!-- button to open modal here will use `modals` config -->
<button
tag="button"
v-modal-link="{name: 'custom-edit-local',props: {a: 1, b: 2} }"
>
open custom edit modal
</button>
</template>
<script>
import CustomEditLocal from "./modals/custom-edit.vue";
export default {
modals: {
CustomEditLocal
}
};
</script>
Development Setup
# install deps
npm install
# serve demo at localhost:8080
npm run dev
# build library and demo
npm run build
# build library
npm run build:library
# build demo
npm run build:demo
License
Copyright (c) 2018 FlynnLee