Simple popup component plugin with global triggers and renderless logic.
import Popup from '@odyzeo/popup';
Vue.use(Popup, {
parentSelector: '#see-props'
});
In your template:
<button
type="button"
@click.prevent="$popup.show('example')"
>
Example
</button>
Anywhere else in your project:
<popup name="example">
<template #default="{ close, ok }">
<div class="placeholder">
Some kind of content!
<br><br>
<button
type="button"
@click.prevent="ok"
>
Accept
</button>
<button
type="button"
@click.prevent="close"
>
Close
</button>
</div>
</template>
</popup>
Property name | Type | Default value | Description |
---|---|---|---|
name |
string | Set global selector for your popup | |
type |
string | fixed |
Change behaviour inside document: fixed - prevents document scrolling, absolute - enable document scrolling |
disable-esc |
boolean | false |
Disable closing popup on 'Esc' key |
disable-off-click |
boolean | false |
Disable closing popup on click outside the popup |
inline |
boolean | false |
Append popup inside its original parent |
parentSelector |
string | null |
Apply styles and popup inside this element not the body. Useful when you scroll inside different element than body. |
transition |
string | fade |
Change or remove opening and closing transitions. Available transitions: fade slide-top slide-right slide-bottom slide-left null - no transition You can even use your own transition name with styles. It will be transpiled to popup-transition--${transition} |
menu |
string | null |
Will adjust popup inner container to behave as menu wrapper based on direction. Directions: top right bottom left |
v-model |
boolean | false |
v-model property is always automatically synced with visible state and you can show/hide using v-model |
Event name | Description |
---|---|
close |
Closes popup with emitting event 'close' |
ok |
Closes popup without emitting event 'close' |
Event | Arguments | Description |
---|---|---|
close |
popupName - Name of closed popup |
Event emitted when popup is closed |
show |
popupName - Name of opened popup |
Event emitted when popup is opened |
<script>
import '@odyzeo/popup/dist/popup.css';
export default {
name: 'App',
};
</script>
Methods can be invoked globally via plugin command:
this.$popup.show('name');
this.$popup.hide('name');
this.$popup.currentPopups
this.$popup.currentPopups.has('name')
npm run serve
# Assuming all tested, committed and works like a charm!
npm version {patch|minor|major} # See semantic version
npm run build-lib
npm run publish
git push
git push --tags # Add release on GitHub
- drag and drop
- tests