0.5.0 • Published 8 years ago
vue-modals v0.5.0
vue-modal
Simple modal plugin with some nice hooks for toggling modal.
Install
The plugin will self install. However it also comes with some additional pre made modals.
import {modalSlide} from 'vue-modal';
Vue.component('modal-slide-show', modalSlide);
For now it's just a slide show.
Example
Plain Modal:
- The modals have events that cant be captured.
- They can also accept any arbitrary data.
<template>
<div v-on:click="$modal.show('login')">login</div>
<div v-on:click="$modal.show('register', {boo: 'yaa'})">register</div>
<modal name="login">
<div slot="content">
// login html
</div>
</modal>
</template>
<script>
export default {
modals: {
login: {
onShow: function () {
console.log('show');
},
onHide: function () {
console.log('hide');
}
},
register: {
onShow: function () {
console.log(this.$modal.data('register'));
}
}
}
}
</script>
Slideshow:
If no index is provided it will just go to 0
on start.
<template>
<div v-for="(index, video) in videos" v-on:click="$modal.show('videos-slide-show', {index: index})">{{ video.name }}</div>
<modal-slide-show name="videos-slide-show" :data="videos"></modal-slide-show>
</template>
<script>
export default {
data: function () {
return {
videos: [{
url: 'http://somelink.com/123',
name: 'zero'
}, {
url: 'http://somelink.com/456',
name: 'one'
}]
};
}
}
</script>
Methods
There are also some other methods available. Probably they will not be required unless building a more generic style plugin.
$modal.show(name, data, overlap)
$modal.hide(name, reset)
$modal.data(name)
$modal.visible(name)
$modal.register(name)
0.5.0
8 years ago
0.4.2
8 years ago
0.4.1
8 years ago
0.4.0
8 years ago
0.3.12
8 years ago
0.3.11
8 years ago
0.3.10
8 years ago
0.3.9
8 years ago
0.3.8
8 years ago
0.3.7
8 years ago
0.3.6
8 years ago
0.3.5
8 years ago
0.3.4
8 years ago
0.3.3
8 years ago
0.3.2
8 years ago
0.3.1
8 years ago
0.3.0
8 years ago
0.2.0
8 years ago
0.1.0
8 years ago