发布时间 | 2020年4月9日 |
---|---|
插件作者 | reegodev |
VueJS的反应窗口大小和媒体查询状态。开箱即用地支持您最喜欢的UI框架网格断点,并且可以使用任何自定义断点进行配置。
v1.5.3(11/15/2020)
v1.5.2(11/09/2020)
v1.5.0(11/07/2020)
v1.4.4(09/01/2020)
# 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>