Vue中检测窗口大小和媒体查询 - vue-screen

Vue中检测窗口大小和媒体查询 - vue-screen
发布时间 2020年4月9日
插件作者 reegodev

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>