1.1.1 • Published 7 years ago
vue-media v1.1.1
vue-media
Like react-media but for Vue.js, and this library is pretty small, it's 969 bytes after minified without gzip.
Install
yarn add vue-media
CDN: https://unpkg.com/vue-media/dist
Usage
<template>
<div id="app">
<media :query="{minWidth: 500}">bigger than 500px</media>
<media :query="{maxWidth: 500}">smaller than 500px</media>
</div>
</template>
<script>
import Media from 'vue-media'
// Component is automatically registered if using CDN.
export default {
components: {
Media
}
}
</script>
The value of query
can also be a media query string like (max-width: 500px)
, for more info please see json2mq doc.
This component will only return the first one of child components.
<template>
<media :query="{maxWidth: 600}">
<h2>hello world</h2>
<my-other-component></my-other-component> <!-- this will not be use! -->
</media>
</template>
Events
Use the media-enter
and media-leave
events.
<template>
<div>
<media
:query="{maxWidth: 600}"
@media-enter="mediaEnter"
@media-leave="mediaLeave"
>
<h2>Hello world</h2>
</media>
<h2 v-if="greaterThan600">I'm now wider than 600!</h2>
</div>
</template>
<script>
import Media from 'vue-media'
export default {
components: {
Media
},
data() {
return {
greaterThan600: window.innerWidth > 600
}
},
methods: {
mediaEnter(mediaQueryString) {
this.greaterThan600 = false
},
mediaLeave(mediaQueryString) {
this.greaterThan600 = true
}
}
}
</script>
The first argument of the listener is a mediaQueryString like (min-width: 400px)
.
Browser support
If you want to support legacy browsers (ie <= 10), please include a window.matchMedia
polyfill.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
vue-media © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @_egoistlily