vue-pseudo-window
v1.0.0
Published
๐ผ Declaratively interface window/document/body in your Vue template
Downloads
111
Maintainers
hirokiosameReadme
๐ผ Pseudo Window
Vue component to bind event-handlers or classes to window/document/body!
Insert pseudo-window anywhere in your template:
<pseudo-window @resize.passive="handleResize" />๐ Try out a demo in this CodePen!
๐ Install
npm i vue-pseudo-window๐โโ๏ธ Why?
- โจ Cleaner code No longer pollute your component with
.addEventListener()&.removeEventListener() - โป๏ธ Template API Use Vue's
@eventsyntax to bind listeners to the window as like you would to any other element - ๐ช Robust Supports all event modifiers
capture,passive, andonce. SSR friendly. - ๐ฅ Tiny 819 B Gzipped!
Before
<template>
...
</template>
<script>
export default {
// Your component would be polluted with event binding logic
mounted() {
window.addEventListener('resize', this.handleResize, { passive: true })
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
...
}
}
}
</script>After โจ
<template>
<div>
...
<!-- Insert pseudo-window anywhere in your template -->
<pseudo-window @resize.passive="handleResize" />
</div>
</template>
<script>
export default {
// Much cleaner!
methods: {
handleResize() {
...
}
}
}
</script>๐จโ๐ซ Demos 
<template>
<div>
<div>
Window width: {{ winWidth }}
</div>
<pseudo-window
<!-- Handle window resize with "passive" option -->
@resize.passive="onResize"
/>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
data() {
return {
winWidth: 0
}
},
methods: {
onResize() {
this.winWidth = window.innerWidth;
}
}
}
</script><template>
<div>
<pseudo-window
document
<!-- Add a class to <html> -->
:class="$style.lockScroll"
<!-- Handle document click -->
@click="onClick"
/>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
onClick() {
console.log('Document click!')
}
}
}
</script>
<style module>
.lockScroll {
overflow: hidden;
}
</style><template>
<div>
<pseudo-window
body
<!-- Add a class to <body> -->
:class="$style.lockScroll"
<!-- Handle body click -->
@click="onClick"
/>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
onClick() {
console.log('Body click!')
}
}
}
</script>
<style module>
.lockScroll {
overflow: hidden;
}
</style>PseudoWindow is a functional component that returns exactly what's passed into it. By using it as the root component, its contents will pass-through.
<template>
<pseudo-window
@blur="pause"
@focus="resume"
>
<video>
<source
src="/media/examples/flower.webm"
type="video/webm"
>
</video>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
resume() {
this.$el.play()
},
pause() {
this.$el.pause()
}
}
}
</script>๐จโ๐ฉโ๐งโ๐ฆ Related
- vue-subslot - ๐ Pick 'n choose what you want from a slot passed into your Vue component
- vue-proxi - ๐ Tiny proxy component for Vue.js
- vue-vnode-syringe - ๐งฌMutate your vNodes with vNode Syringe ๐