Vue.js实用程序组件可基于断点显示和隐藏组件

断点 (vue-breakpoints)

Vue.js utility component to show and hide components based on breakpoints

Vue.js实用程序组件可基于断点显示和隐藏组件

View demo 查看演示 Download Source 下载源

🔧安装 (🔧 Install)

yarn add vue-breakpoints

yarn add vue-breakpoints

👈用法 (👈 Usage)

<template>
  <nav>
    <hide-at breakpoint="medium">
      <mobile-nav />
    </hide-at>
    <show-at breakpoint="mediumAndAbove">
      <desktop-nav>
    </show-at>
  </nav>
</template>

<script>
  import {showAt, hideAt} from 'vue-breakpoints'
  export default {
    components: { hideAt, showAt }
  }
</script>

断点 (Breakpoints)

You can pass following values as a breakpoint:

您可以传递以下值作为断点：

• small

  小

• mediumAndBelow

  mediumAndBelow

• medium

  中

• mediumAndAbove

  中等以上

• largeAndBelow

  大和下

• large

  大

默认断点 (Default Breakpoints)

Default breakpoints are

默认断点是

small: 744,
medium: 1128,
large: Infinity

but they can be overwritten if you pass an object to the breakpoints prop.

但是如果将对象传递给breakpoints道具，它们可能会被覆盖。

<show-at :breakpoints="{small: 620, medium: 1280, large: 1600}" breakpoint="medium">

翻译自: https://vuejsexamples.com/vue-js-utility-component-to-show-and-hide-components-based-on-breakpoints/