如何使用 vue-mq 在 Vue.js 中实现响应式设计

介绍

响应式设计是 Web 应用程序经常需要的功能。作为开发人员，我们必须支持各种设备和屏幕尺寸。CSS 是用于简单用例和非常高效的性能方面的绝佳工具。然而，即使使用预处理器（SASS、PostCSS、LESS 等），管理复杂的媒体查询也可能变得繁重。

由于MatchMedia API，Vue.js 可以大大降低处理媒体查询和响应式设计的复杂性。它提供了与基于组件的架构的无缝集成，保持了清晰的声明性和语义方法。

在本文中，您将探索可vue-mq用于媒体查询插件的功能。

先决条件

如果你想跟随这篇文章，你需要：

警告：此插件依赖 matchMedia API 来检测屏幕尺寸变化。因此，对于较旧的浏览器和 Internet Explorer，您应该使用Paul Irish 的 matchMedia polyfill

本教程已通过 Node v15.8.0、npmv7.5.4、Vue v12.6.11 和vue-mqv1.0.1 验证。

使用 vue-mq

首先，要使用vue-mq，请打开您的终端并导航到您现有的 Vue 项目目录。然后，运行以下命令：

  • npm install vue-mq@1.0.1

接下来，使用您的代码编辑器，编辑您的 Vue 项目和import库：

import VueMq from 'vue-mq'

注册插件时定义自定义断点。键是断点，值以像素为单位：

Vue.use(VueMq, {
  breakpoints: {
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
})

在这个例子中，定义了三个断点。sm对于“小屏幕”。md对于“中屏幕”。lg对于“大屏幕”。

您还可以在设备或任何对您有意义的东西之后命名断点：

Vue.use(VueMq, {
  breakpoints: {
    mobile: 450,
    tablet: 900,
    laptop: 1250,
    desktop: Infinity,
  }
})

在本例中，定义了四个断点。A mobile、tablet、laptop和desktop屏幕尺寸。

使用vue-mq与条件显示

在处理响应式设计时，您经常希望有条件地渲染元素。

例如，仅显示移动设备的特定菜单。

为了实现该功能，您可以使用$mq可在组件的每个实例内访问的反应性属性。它的值将始终是当前断点。

<template>
  <mobile-menu v-if="$mq === 'mobile'"></mobile-menu>
</template>

该组件会在当前屏幕尺寸满足条件时进行渲染。如果您将“移动”的断点定义为 450 像素，则此组件将呈现最大为 450 像素的屏幕尺寸。

vue-mq还使用mq-layout充当条件槽的全局组件为此语法提供速记：

<template>
  <mq-layout mq="mobile">
    <mobile-menu></mobile-menu>
  </mq-layout>
  <mq-layout mq="tablet+">
    <desktop-menu></desktop-menu>
  </mq-layout>
</template>

请注意+“平板电脑”断点名称后面的加号 ( )。这指示vue-mq以断点和所有更大的断点为目标。

使用vue-mq与道具价值

另一个非常常见的用例是根据屏幕大小计算不同的值。

例如，假设您想显示一个响应式项目网格：

  • 在移动设备上您需要 2 列
  • 在平板电脑上你想要 3 列
  • 在笔记本电脑上你想要 4 列

换句话说，您只需要根据屏幕大小将具有不同值的 prop 传递给完全相同的网格组件。它将负责显示正确的列数。

vue-mq 提供了一个全局过滤器，用于使用声明性规则将断点映射到值：

<template>
  <grid-component :column="$mq | mq({
    phone: 2,
    tablet: 3,
    laptop: 4
  })">
  </grid-component>
</template>

请记住，此插件正在执行移动优先的方法。如果未明确定义，则值将默认为最接近的较小断点值。

如果您省略了“平板电脑”规则 ( tablet: 3)，它将回退到“平板电脑”屏幕尺寸的“手机”规则并显示 2 列。

同样，如果您需要更复杂的值，请将其移动到computedprop 中：

<template>
  <responsive-title>{{ displayText }}</responsive-title>
</template>

<script>
export default {
  computed: {
    displayText() {
      return this.$mq === 'mobile'
      ? 'You are on a mobile device'
      : 'You are on a larger device'
    }
  }
}
</script>

此代码将显示"You are on mobile device"或"You are on a larger device"取决于您的屏幕尺寸。

使用vue-mq与响应类

有时，您还想通过 CSS 快速更改样式。诀窍是在要设置样式的元素上使用断点名称作为计算类。

以下是单文件组件的示例：

<template>
  <h1 class="responsive-title" :class="$mq">
    Responsive Title
  </h1>
</template>

<style>
  .responsive-title.mobile { font-size: 1em; }
  .responsive-title.desktop { font-size: 3em; }
</style>

此代码将根据您的屏幕尺寸向元素添加“移动”或“桌面”类。

应用其他库

以下是与其他库结合使用的一些想法：

结论

在本文中，您探索了可vue-mq用于媒体查询插件的功能。

vue-mq 为常见用例提供速记，同时它的灵活性让您可以随心所欲地编写媒体查询。

如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁