media query methods for vuejs
npm install v-media-queryjavascript
import vMediaQuery from 'v-media-query'Vue.use(vMediaQuery.default)
``html
`
v-if gets true for screen with width > 600px and updates after resizing`javascript
new Vue({
created() {
if (this.$mq.above(600)) {
console.log('screen > 600px')
}
}
})new Vue({
watch: {
'$mq.resize': 'screenResize'
},
methods: {
screenResize() {
if (this.$mq.above(600)) {
console.log('screen > 600px')
}
}
}
})
new Vue({
computed: {
screenMore600() {
return this.$mq.resize && this.$mq.above(600)
}
}
})
`
and hereDefaults methods
All methods are allowed in $mq (mq = media query)$mq.resize
* variable is trigger that update methods---
$mq.above(measurement, value)
$mq.below(measurement, value)
$mq.between(measurement, [valMin, valMax])
$mq.beyond(measurement, [valMin, valMAx])
*
measurement
* Can take values: 'width', 'height'
* Default value = 'width'
example: $mq.above(600) == $mq.above('width', 600)
* value, valMin, valMax
* Can take type Number and String
* All values type of Number will be rewrited to Number + 'px'
example: $mq.above(600) == $mq.above('600px')---
$mq.expr(expression)
* expression - any valid css media query
example: $mq.expr('screen and (max-device-width: 300px)')Custom methods
Your can add custom methods to default methods$3
`javascript
Vue.use(vMediaQuery.default, {
methods: {
onlyForRetina() {
return matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)').matches
}
fackAbove(...args) {
return vMediaQuery.methods.above(...args)
},
}
})
`
`html
`Variables
The plugin allows you to add custom variables in the vue
All variables are available in the $mv (mv = media variables)$3
`javascript
Vue.use(vMediaQuery.default, {
variables: {
hd: 1920,
sm: '1240px'
}
})
`
`html
`Names $mq and $mv
If u don't like names $mq and $mv u can change them$3
`javascript
Vue.use(vMediaQuery.default, {
nameSpace: {
methods: $$myMethods, // default $mq
variables: __myVariables, // default $mv
},
variables: {
hd: 1920,
}
})
`
`html
``