Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AStaroverov/v-media-query
easy media query for vue
https://github.com/AStaroverov/v-media-query
Last synced: 2 months ago
JSON representation
easy media query for vue
- Host: GitHub
- URL: https://github.com/AStaroverov/v-media-query
- Owner: AStaroverov
- Created: 2016-02-19T06:28:26.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T01:30:48.000Z (about 2 years ago)
- Last Synced: 2024-09-19T09:09:45.459Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 415 KB
- Stars: 104
- Watchers: 4
- Forks: 5
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-vue - v-media-query - vue中添加用于配合媒体查询的方法 (实用库)
- awesome-github-vue - v-media-query - vue中添加用于配合媒体查询的方法 (实用库)
- awesome - v-media-query - vue中添加用于配合媒体查询的方法 (实用库)
- awesome-vue - v-media-query - media-query?style=social) - vue中添加用于配合媒体查询的方法 (实用库)
README
# vue media query methods ([ru](https://github.com/AStaroverov/v-media-query/blob/master/README_RU.md))
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](http://rawcdn.githack.com/AStaroverov/v-media-query/f35354a69a6e9dc05a1dd37237c597505b790f32/index.html)
## 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
```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)
### Example
```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
### Example
```javascript
Vue.use(vMediaQuery.default, {
nameSpace: {
methods: $$myMethods, // default $mq
variables: __myVariables, // default $mv
},
variables: {
hd: 1920,
}
})
```
```html
```