Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/privatenumber/vue-pseudo-window
🖼 Declaratively interface window/document/body in your Vue template
https://github.com/privatenumber/vue-pseudo-window
declarative document event-handling event-listeners html vue window
Last synced: 19 days ago
JSON representation
🖼 Declaratively interface window/document/body in your Vue template
- Host: GitHub
- URL: https://github.com/privatenumber/vue-pseudo-window
- Owner: privatenumber
- License: mit
- Created: 2018-10-14T15:59:50.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2021-03-14T07:51:36.000Z (over 3 years ago)
- Last Synced: 2024-05-04T00:17:54.245Z (7 months ago)
- Topics: declarative, document, event-handling, event-listeners, html, vue, window
- Language: JavaScript
- Homepage:
- Size: 882 KB
- Stars: 31
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖼 Pseudo Window 
Vue component to bind event-handlers or classes to `window`/`document`/`body`!
Insert pseudo-window anywhere in your template:
```html
```
👉 Try out a [demo in this CodePen](https://codepen.io/privatenumber/pen/qBqEOGa)!
## 🚀 Install
```sh
npm i vue-pseudo-window
```
## 🙋♂️ Why?
- ✨ **Cleaner code** No longer pollute your component with `.addEventListener()` & `.removeEventListener()`
- ♻️ **Template API** Use Vue's `@event` syntax to bind listeners to the window as like you would to any other element
- 💪 **Robust** Supports all event modifiers `capture`, `passive`, and `once`. SSR friendly.
- 🐥 **Tiny** 819 B Gzipped!
### Before
```html
...
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() {
...
}
}
}
```
### After ✨
```html
...
export default {
// Much cleaner!
methods: {
handleResize() {
...
}
}
}
```
## 👨🏫 Demos [](https://jsfiddle.net/hirokiosame/p5Lz419s/)
Adding listeners to window
```html
Window width: {{ winWidth }}
@resize.passive="onResize"
/>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
data() {
return {
winWidth: 0
}
},
methods: {
onResize() {
this.winWidth = window.innerWidth;
}
}
}
```
Adding class & listeners to document <html>
```html
-->
:class="$style.lockScroll"
@click="onClick"
/>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
onClick() {
console.log('Document click!')
}
}
}
.lockScroll {
overflow: hidden;
}
```
Adding class & listeners to body <body>
```html
-->
:class="$style.lockScroll"
@click="onClick"
/>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
onClick() {
console.log('Body click!')
}
}
}
.lockScroll {
overflow: hidden;
}
```
Only want one root element?
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.
```html
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
resume() {
this.$el.play()
},
pause() {
this.$el.pause()
}
}
}
```
## 👨👩👧👦 Related
- [vue-subslot](https://github.com/privatenumber/vue-subslot) - 💍 Pick 'n choose what you want from a slot passed into your Vue component
- [vue-proxi](https://github.com/privatenumber/vue-proxi) - 💠 Tiny proxy component for Vue.js
- [vue-vnode-syringe](https://github.com/privatenumber/vue-vnode-syringe) - 🧬Mutate your vNodes with vNode Syringe 💉