2.0.1 • Published 6 years ago
vue-media-query v2.0.1
> yarn add vue-media-query --save
> npm install vue-media-query --save
<media-query>
<template>
<div id="app">
<h1>demo2</h1>
<media-query v-model="responsive" :query="query">
<h2 :style="{wordBreak: 'break-all'}">{{title}}</h2>
</media-query>
</div>
</template>
<script>
import MediaQuery from 'vue-media-query'
export default {
data() {
return {
responsive: {},
query: {
landscape: { orientation: 'landscape' },
portrait: { orientation: 'portrait' },
},
}
},
computed: {
title() {
return JSON.stringify(this.responsive)
},
},
}
</script>
When you change the orientation of device (phone or browser). You can see the result will be changed.
The value of query can also be a media query string like (max-width: 500px), for more info please see json2mq doc.
This project is inspired by vue-media.
<media-query-provider>
<template>
<media-query-provider :query="query">
<router-view></router-view>
</media-query-provider>
</template>
<script>
import { MediaQueryProvider } from 'vue-media-query'
export default {
components: { MediaQueryProvider }
data() {
return {
query: {
landscape: { orientation: 'landscape' },
portrait: { orientation: 'portrait' },
},
}
}
}
</script>
<template>
<h2>{{title}}</h2>
</template>
<script>
// sub component
export default {
inject: ['media'],
computed: {
title() {
return JSON.stringify(this.media)
}
}
}
</script>
Notice: Because of <media-query-provider>
depends on provide/inject
. So the version of Vue should be 2.2.0+
.
If you want to support legacy browsers (ie <= 10), please include a window.matchMedia polyfill.
- 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
vue-media-query © blackcater, Released under the MIT License. Authored and maintained by blackcater with help from contributors (list).
www.blackcater.win · GitHub @blackcater · Twitter @tomtang2015