Vue 3 的断点/响应式插件

Question

使用 Vue 3 构建企业级应用程序，不幸的是我还没有找到任何合适的插件来使应用程序具有响应能力。虽然有一些较旧的插件可以与 Vue 2 配合使用，但我发现没有任何插件可以与 Vue-3 配合使用。

使应用程序具有响应能力的合适方法是什么？

Answer 1

假设 CSS 媒体查询还不够，我老实说只使用 matchMedia API。 您可以使用

MediaQueryList

onchange 处理程序 对窗口大小调整做出反应。

Answer 2

我决定编写一个专注于易用性和运行时性能的小插件：vue-responsiveness。

yarn add vue-responsiveness

import { VueResponsiveness } from 'vue-responsiveness'

createApp(App)
  .use(VueResponsiveness, {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1260,
    xl: 1920
  })
  .mount('#app')

提供应用程序范围的

$matches[key][value]

，可用于响应式地显示/隐藏内容。

• key

  是配置对象的键之一

• value

  是

  min

  、

  max

  或

  only

  ，都是

  boolean

  。

使用示例（针对上述配置）：

<template v-if="$matches.sm.min">
  <!-- @media (min-width: 600px) -->
   ...content
</template>

<SomeComponent v-if="$matches.sm.max">
  <!-- @media (max-width: 959.9px) -->
  ...content
</SomeComponent>

<div v-if="$matches.sm.only">
  <!-- @media (min-width: 600px) and (max-width: 959.9px) -->
  ...content
</div>

基本演示：https://codesandbox.io/p/devbox/nxqvcr

---

Composition API 中的用法 (

setup

):

import { useMatches } from 'vue-responsiveness'

const matches = useMatches() // reactive object

Options API 中的用法：

export default {
  computed: {
    isSmAndUp() {
      return this.$matches.sm.min
    }
  },
  methods: {
   logCurrentInterval() {
     console.log(this.$matches.current)
   }
  }
}

---

附带流行 CSS 框架的预设，因此您不必花时间找出它们的响应断点：

import { VueResponsiveness, Presets } from 'vue-responsiveness'

//...
   .use(VueResponsiveness, Presets.Tailwind_CSS)
//...

可用预设：

Bootstrap_3

、

Bootstrap_4

、

Bootstrap_5

、

Bulma

、

Chakra

、

Foundation

、

Ionic

、

Material_Design

、

Materialize

、

Material_UI

、

Quasar

，

Semantic_UI 

、

Skeleton

、

Tailwind_CSS

、

Vuetify

、

Windi_CSS

TypeScript 友好（用 TS 编写），它应该在任何像样的 IDE 中获得正确的代码提示和 linting。

---

希望您会发现它很有用。