npm下載
npm install vue-container-query --save
各個(gè)屏幕的值
<template>
<container-query
:query="query"
v-model="params"
@change="handleChange"
>
<pre class="app">{{ params }}</pre>
</container-query>
</template>
<script>
import { ContainerQuery } from 'vue-container-query'
const query = {
'screen-xs': {
maxWidth: 575
},
'screen-sm': {
minWidth: 576,
maxWidth: 767
},
'screen-md': {
minWidth: 768,
maxWidth: 991
},
'screen-lg': {
minWidth: 992,
maxWidth: 1199
},
'screen-xl': {
minWidth: 1200,
maxWidth: 1599
},
'screen-xxl': {
minWidth: 1600
}
}
export default {
components: { ContainerQuery },
data () {
return { query, params: {} }
},
methods: {
// 每次屏幕發(fā)生變化都會執(zhí)行改方法
handleChange () {}
}
}
</script>
