显示 & 平台

显示组合式函数提供了关于当前设备的大量信息。

使用

useDisplay 组合式函数提供了关于当前设备多个方面的信息。

这样，您就可以根据窗口大小、设备类型和 SSR 状态来控制应用程序的各个方面。此可组合类可与 grids 和其他响应式实用工具类（例如 display配合使用。

以下展示了如何访问应用的显示信息：

<script setup>
  import { onMounted } from "vue";
  import { useDisplay } from "vuetify";

  const { mobile } = useDisplay();

  onMounted(() => {
    console.log(mobile.value); // false
  });
</script>

如果你仍旧在使用 Vue 的选项式 API，那么你可以使用全局变量 $vuetify 来获得显示的信息。注意在选项式 API 中，refs 引用无需使用 .value即可访问。

<script>
  export default {
    mounted() {
      console.log(this.$vuetify.display.mobile);
    },
  };
</script>

API

组件	描述
useDisplay	组合式函数

Breakpoints and Thresholds

Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the useDisplay composable. The system uses an "and up" mentality starting from xs at 0px. The default threshold values are displayed below.

Device	Code	Type	Range
Extra small	xs	Small to large phone	< 600px
Small	sm	Small to medium tablet	600px > < 960px
Medium	md	Large tablet to laptop	960px > < 1280px
Large	lg	Laptop to desktop	1280px > < 1920px
Extra large	xl	1080p to 1440p desktop	1920px > < 2560px
Extra extra large	xxl	4k and ultra-wide	> 2560px
Specification

这些范围为useDisplay中可访问的各种附加AndUp / AndDown属性提供动力

{
  smAndDown: boolean; // < 960px
  smAndUp: boolean; // > 600px
  mdAndDown: boolean; // < 1280px
  mdAndUp: boolean; // > 960px
  lgAndDown: boolean; // < 1919px
  lgAndUp: boolean; // > 1280px
  xlAndDown: boolean; // < 2559px
  xlAndUp: boolean; // > 1920px
}

选项

可组合的useDisplay有几个配置选项，比如为断点定义自定义值的能力。

例如，thresholds选项修改用于视口计算的值。下面的代码片段覆盖了从 xs 到 lg 的thresholds，并将mobileBreakpoint设置为sm。

import { createVuetify } from "vuetify";

export default createVuetify({
  display: {
    mobileBreakpoint: "sm",
    thresholds: {
      xs: 0,
      sm: 340,
      md: 540,
      lg: 800,
      xl: 1280,
    },
  },
});

INFO

mobileBreakpoint选项接受数字和断点键。

Examples

在下面的示例中，我们使用 switch 语句和当前断点名称来修改v-card的height属性组件:

<template>
  <v-card :height="height"> ... </v-card>
</template>

<script setup>
  import { computed } from "vue";
  import { useDisplay } from "vuetify";

  const { name } = useDisplay();

  const height = computed(() => {
    // name is reactive and
    // must use .value
    switch (name.value) {
      case "xs":
        return 220;
      case "sm":
        return 400;
      case "md":
        return 500;
      case "lg":
        return 600;
      case "xl":
        return 800;
      case "xxl":
        return 1200;
    }

    return undefined;
  });
</script>

接口

{
  // Breakpoints
  xs: boolean; // 0 - 595
  sm: boolean; // 600 - 959
  md: boolean; // 960 - 1279
  lg: boolean; // 1280 - 1919
  xl: boolean; // > 1920
  xxl: boolean;
  smAndDown: boolean; // < 960
  smAndUp: boolean; // > 600
  mdAndDown: boolean; // < 1280
  mdAndUp: boolean; // > 960
  lgAndDown: boolean; // < 1919
  lgAndUp: boolean; // > 1280
  xlAndDown: boolean;
  xlAndUp: boolean; // < 1920

  // true if screen width < mobileBreakpoint
  mobile: boolean;
  mobileBreakpoint: number | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

  // Current breakpoint name (e.g. 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl')
  name: string;

  // The current value of window.innerHeight and window.innerWidth
  height: number;
  width: number;

  // Device userAgent information
  platform: {
    android: boolean;
    ios: boolean;
    cordova: boolean;
    electron: boolean;
    chrome: boolean;
    edge: boolean;
    firefox: boolean;
    opera: boolean;
    win: boolean;
    mac: boolean;
    linux: boolean;
    touch: boolean;
    ssr: boolean;
  }

  // The values used to make Breakpoint calculations
  thresholds: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    xxl: number;
  }
}

使用 Setup 函数

使用useDisplay组合函数和 Vue 3 的setup函数来利用Composition API的强大功能。 在这个例子中，我们展示了如何在移动断点处于活动状态时切换v-dialog的全屏属性。

<template>
  <v-dialog :fullscreen="mobile"> ... </v-dialog>
</template>

<script setup>
  import { useDisplay } from "vuetify";

  const { mobile } = useDisplay();
</script>

关键点大小条件

断点值和条件值返回从当前视口大小派生的boolean。此外，breakpoint可组合遵循Vuetify Grid 并且可以访问诸如xlOnly, xsOnly, mdAndDown,等属性。在下面的例子中，我们使用setup函数将 xs 和 mdAndUp 值传递给模板:

<template>
  <v-sheet :min-height="mdAndUp ? 300 : '20vh'" :rounded="xs"> ... </v-sheet>
</template>

<script setup>
  import { useDisplay } from "vuetify";

  // Destructure only the keys you want to use
  const { xs, mdAndUp } = useDisplay();
</script>

使用 dynamic 显示值，我们可以在 medium 或 greater 的断点上调整v-sheet的最小高度为300，并且在 extra small 屏幕上仅显示圆角:

Component Mobile Breakpoints

TIP

此特性在v3.4.0 (Blackguard)版本引入。

Vuetify 中的一些组件有一个mobile-breakpoint属性，允许您覆盖默认值。这些组件引用全局的 mobileBreakpoint 值，该值是在运行时使用vuetify.js文件中提供的选项生成的。

以下组件内置了对mobile-breakpoint属性的支持:

组件
v-banner
v-navigation-drawer
v-slide-group

默认情况下，mobileBreakpoint设置为lg，这意味着如果窗口的宽度小于1280像素(这是lg阈值的默认值)，则useDisplay可组合将其mobile值更新为true。

例如，v-banner 组件在移动端和桌面端实现不同的样式。在下面的例子中，第一个横幅使用全局mobile-breakpoint值lg，而第二个横幅用580覆盖这个默认值:

<template>
  <div>
    <v-banner> ... </v-banner>

    <v-banner mobile-breakpoint="580"> ... </v-banner>
  </div>
</template>

<script setup>
  import { onMounted } from "vue";
  import { useDisplay } from "vuetify";

  const { width, mobile } = useDisplay();

  onMounted(() => {
    console.log(width.value); // 960
    console.log(mobile.value); // true
  });
</script>

如果屏幕宽度为 1024 像素，第二个横幅将不会转换为移动端状态。

useDisplay overrides

直接给 useDisplay 指定一个自定义的mobileBreakpoint值 可组合并覆盖全局值。在下面的例子中，我们使用了一个自定义的 mobileBreakpoint 值580:

<script setup>
  import { onMounted } from "vue";
  import { useDisplay } from "vuetify";

  const { mobile } = useDisplay({ mobileBreakpoint });

  // Given a viewport width of 960px
  onMounted(() => {
    console.log(mobile.value); // false
  });
</script>

如果为name参数提供了一个值，请利用displayClasses属性将适当的类应用于组件。在下一个例子中，以下类将被应用到组件的根元素:

<template>
  <div
    :class="[
      'v-component',
      displayClasses,
    ]"
  >
    <!-- v-component--mobile -->
  </div>
</template>

<script setup>
  import { defineName } from "vue";
  import { useDisplay } from "vuetify";

  const { displayClasses } = useDisplay({ mobileBreakpoint }, "v-component");
</script>

如果省略 name 参数，displayClasses 将使用 Vue 设置的默认名称。本例使用本地组件的默认名称:

<template>
  <v-navigation-drawer
    :class="[
      displayClasses, // 'app-drawer--mobile'
    ]"
  >
    ...
  </v-navigation-drawer>
</template>

<script setup>
  import { useDisplay } from "vuetify";

  const { displayClasses } = useDisplay({ mobileBreakpoint });
</script>