Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

vue media query methods (ru)

Plugin adds methods for work with media query in vue

General example:

import vMediaQuery from 'v-media-query'

Vue.use(vMediaQuery.default)
<some-component v-if="$mq.resize && $mq.above('600px')"></some-component>

v-if gets true for screen with width > 600px and updates after resizing

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

Example

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)
    },
  }
})
<some-component v-if="$mq.onlyForRetina()"></some-component>
<some-component v-show="$mq.resize && $mq.fackAbove(800)"></some-component>

Variables

The plugin allows you to add custom variables in the vue
All variables are available in the $mv (mv = media variables)

Example

Vue.use(vMediaQuery.default, {
  variables: {
    hd: 1920,
    sm: '1240px'
  }
})
<some-component v-show="$mq.resize && $mq.between([$mv.sm, $mv.hd])"></some-component>

Names $mq and $mv

If u don't like names $mq and $mv u can change them

Example

Vue.use(vMediaQuery.default, {
  nameSpace: {
    methods: $$myMethods, // default $mq
    variables: __myVariables, // default $mv
  },
  variables: {
    hd: 1920,
  }
})
<some-component v-show="$$myMethods.resize && $$myMethods.above(__myVariables.hd)"></some-component>

About

easy media query for vue

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.