vue media query methods (ru)

Plugin adds methods for work with media query in vue

General example:

``javascript
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 here

Defaults 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

``