VueJS的反应窗口大小和媒体查询状态。开箱即用地支持您最喜欢的UI框架网格断点，并且可以使用任何自定义断点进行配置。

变更日志：

v1.5.3（11/15/2020）

• 修复：为matchMedia查询添加向后兼容性

v1.5.2（11/09/2020）

• 固定：循环断点键时不包括breakpointsOrder属性

v1.5.0（11/07/2020）

• 添加Tailwind 2xl断点
• 在$ screen对象上添加配置属性

v1.4.4（09/01/2020）

• 修复Tailwind lg和xl断点值

特征：

• • 反应和去抖动的窗口innerWidth和innerHeight
  • 反应性媒体查询状态和设备方向
  • 检测触摸屏功能
  • 开箱即用提供的最常见ui框架的断点：Tailwind，Bootstrap，Bulma，Foundation，Materialize，语义UI
  • 兼容SSR（包括Nuxt模块）

安装和下载：

# Yarn
$ yarn add vue-screen
# NPM
$ npm install vue-screen --save

使用：

1.安装并导入模块。

import Vue from 'vue';
import VueScreen from 'vue-screen';

2.注册组件并定义要使用的框架。

// Tailwind (default)
Vue.use(VueScreen); 
// Bootstrap
Vue.use(VueScreen, 'bootstrap'); 
// Bulma
Vue.use(VueScreen, 'bulma'); 
// Foundation
Vue.use(VueScreen, 'foundation'); 
// Materialize
Vue.use(VueScreen, 'materialize'); 
// Semantic UI
Vue.use(VueScreen, 'semantic-ui');

3.或使用自定义断点。

Vue.use(VueScreen, {
  sm: 480, 
  md: '45em',
  lg: '1280px'
});

4.将组件插入您的应用程序模板。

<template>
  <div>
    <p>Page width is {{ $screen.width }} px</p>
    <p>Page height is {{ $screen.height }} px</p>
    <p>Current breakpoint is {{ $screen.breakpoint }} px</p>
  </div>
</template>

---

官网：https://github.com/reegodev/vue-screen

演示：https://www.vue365.cn/code_demo.php?id=126

GitHub下载：https://github.com/reegodev/vue-screen/archive/develop.zip