断点

使用 Vuetify 的时候，你可以根据窗口的尺寸设定应用的布局。例如，我们可以使用特定的 grid 属性或者与指定的断点相关的助手类 (i.e. display) 设定布局。Vuetify 提供了 5 个预先定义的断点，你也可以根据自己的需要修改他们。

Breakpoint object

{
  // Breakpoints
  xs: boolean
  sm: boolean
  md: boolean
  lg: boolean
  xl: boolean
  // Conditionals
  xsOnly: boolean
  smOnly: boolean
  smAndDown: boolean
  smAndUp: boolean
  mdOnly: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  lgOnly: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  xlOnly: boolean
  // Current breakpoint name (e.g. 'md')
  name: string
  // Dimensions
  height: number
  width: number
  // Thresholds
  // Configurable through options
  {
    xs: number
    sm: number
    md: number
    lg: number
  }
  // Scrollbar
  scrollBarWidth: number
}

Vuetify将有效的断点转换为应用程序内的可访问对象。这将允许您根据视口的大小应用特定的属性和特性。您可以通过$vuetify.breakpoint访问这个对象。

<!-- Vue Component -->
<script>
  export default {
    mounted () {
      console.log(this.$vuetify.breakpoint)
    },
    computed: {
      imageHeight () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return '220px'
          case 'sm': return '400px'
          case 'md': return '500px'
          case 'lg': return '600px'
          case 'xl': return '800px'
        }
      },
    },
  }
</script>

用例

您可以定义自己的断点阈值像素值，但目前需要两个步骤：1. 要更新样式，您将必须覆盖 $grid-breakpoints SASS 变量（请参见 SASS variables）。 2. 若要在事物的 javascript 端使用相同的值，则必须在应用程序引导期间将它们传递给它们，如下所示：

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 340,
      sm: 540,
      md: 800,
      lg: 1280,
    },
    scrollBarWidth: 24,
  },
})

该对象包含与您已经习惯使用的栅格系统相同的语义属性。让我们尝试一个真实世界的例子。您有一个v-dialog组件，您想要在移动设备上转换成一个全屏对话框。通常情况下，您需要将视野大小绑定在观察者上，和/或在页面加载时进行检查。

<!-- Vue Component -->
<script>
  export default {
    data: () => ({
      isMobile: false,
    }),
    beforeDestroy () {
      if (typeof window !== 'undefined') {
        window.removeEventListener('resize', this.onResize, { passive: true })
      }
    },
    mounted () {
      this.onResize()
      window.addEventListener('resize', this.onResize, { passive: true })
    },
    methods: {
      onResize () {
        this.isMobile = window.innerWidth < 600
      },
    },
  }
</script>

这是很多的样板文字。即使您选择使用内置的 v-resize 指令，仍然必须定义调整大小的方法。使用 breakpoint 对象，您可以完全跳过这个逻辑并重新构建您的应用程序。

<!-- Vue Component -->
<template>
  <v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>