全局配置

Vuetify 允许你在建立你的应用时全局地设定默认的属性值或者为每个组件设定默认属性值。例如你可以将所有组件的 ripple 属性全部禁用，或者将所有的工作区或者按钮的 elevation 效果禁用。

起步

使用 Vuetify 配置对象的defaults属性来设置默认的 prop 值。这里我们禁用了所有支持它的组件的ripple，并将所有<v-sheet>组件的默认elevation设置为4。

import { createApp } from "vue";
import { createVuetify } from "vuetify";

export default createVuetify({
  defaults: {
    global: {
      ripple: false,
    },
    VSheet: {
      elevation: 4,
    },
  },
});

上下文默认值

也可以为嵌套在其他组件中的组件配置默认值，例如，如果你想为嵌套在<v-card>组件中的所有<v-btn>组件设置默认 variant:

createVuetify({
  defaults: {
    VCard: {
      VBtn: { variant: "outlined" },
    },
  },
});

这已被某些组件内部使用：

• 当嵌套在 <v-card-actions> 或 <v-toolbar> 中时，<v-btn> 具有 variant="text"。
• <v-list> 嵌套在 <v-navigation-drawer> 中时，具有 bg-color="transparent" 的效果。
• 列表、芯片组、扩展面板、选项卡和表单都使用该系统将某些 props 传递给它们的子代。例如，<v-tabs disabled> 将为其内部的所有 <v-tab> 组件将 disabled 的默认值设置为true。

v-defaults-provider 可用于为特定范围内的组件设置默认值。

全局类和样式

TIP

此特性自 v3.2.0 (Orion)引入

定义所有built-in全局类和样式 组件;包括virtual 的人。这在构建应用程序的设计系统时提供了大量的实用程序，并减少了模板中重复代码的数量。

假设您想要设置所有 v-btn的text-transform 组件为none，但对使用SASS variables不感兴趣 。只需将style属性添加到组件的默认值中，就可以将自定义值应用于该组件的所有实例。

下面的代码示例修改了所有<v-btn>组件的text-transform CSS 属性:

import { createVuetify } from "vuetify";
import { VBtn } from "vuetify/components/VBtn";

export default createVuetify({
  defaults: {
    VBtn: {
      style: "text-transform: none;",
    },
  },
});

作为一种替代方法，应用实用程序类来实现相同的效果:

import { createVuetify } from "vuetify";
import { VBtn } from "vuetify/components/VBtn";

export default createVuetify({
  defaults: {
    VBtn: {
      class: "text-none",
    },
  },
});

此外，它还可以处理任何有效的 Vue 值类型，如对象和数组:

import { createVuetify } from "vuetify";
import { VBtn } from "vuetify/components/VBtn";

export default createVuetify({
  defaults: {
    VBtn: {
      style: [{ textTransform: "none" }],
    },
  },
});

WARNING

class 和 style 不能在global 对象中使用, 类和样式不能在全局对象中使用，只能在特定组件中使用。

与虚拟组件一起使用

无论您是在为应用程序开发包装器框架还是设计系统，都可以使用virtual components 是一个强大的盟友。在 Vuetify 默认系统中，类和样式就像普通的道具一样被处理，但是它们不是在模板级别被覆盖，而是被合并。

例如，让我们创建v-btn的别名 组件并修改它的一些默认值:

import { createVuetify } from "vuetify";
import { VBtn } from "vuetify/components/VBtn";

export default createVuetify({
  aliases: {
    VBtnPrimary: VBtn,
  },

  defaults: {
    VBtnPrimary: {
      class: ["v-btn--primary", "text-none"],
    },
  },
});

现在，在模板中使用<v-btn-primary>并应用一个自定义类:

<template>
  <v-btn-primary class="foobar">Foobar</v-btn-primary>
</template>

编译后，生成的 HTML 将同时包含全局定义类和自定义类:

<!-- Example HTML Output -->
<button class="v-btn v-btn--primary text-none foobar">Fizzbuzz</button>

当你有一个组件的多个变体需要单独的类来定位时，这尤其有用:

<template>
  <v-app>
    <v-main>
      <v-btn-primary>Primary</v-btn-primary>

      <span class="mx-2" />

      <v-btn-secondary>Secondary</v-btn-secondary>
    </v-main>
  </v-app>
</template>

<style>
  .v-btn.v-btn--primary {
    background: linear-gradient(to right, #ff8a00, #da1b60);
    color: white;
  }
  .v-btn.v-btn--secondary {
    background: linear-gradient(to right, #da1b60, #ff8a00);
    color: white;
  }
</style>

请记住，虚拟组件不会从其扩展中继承全局类或样式。例如，下面的 Vuetify 配置使用v-chip 作为虚拟<v-chip-primary>组件的别名

import { createVuetify } from "vuetify";
import { VChip } from "vuetify/components/VChip";

export default createVuetify({
  aliases: {
    VChipPrimary: VChip,
  },

  defaults: {
    VChipPrimary: {
      class: "v-chip--primary",
    },
    VChip: {
      class: "v-chip--custom",
    },
  },
});

当<v-chip-primary>在模板中使用时，它将不具有v-chip——custom类。

WARNING

在某些情况下，默认类或样式可能会无意中传递给内部组件。这主要涉及表单输入和控件 form inputs and controls。

在自定义组件中使用

TIP

此特性自 v3.2.0 (Orion)引入

Hook 到 Vuetify defaults 引擎，并像我们一样配置你的自定义组件。这个特性使得在整个应用程序中均匀化功能并减少重复代码的数量变得非常容易。

让我们从创建一个接受单个 prop 的基本组件的例子开始:

<template>
  <div>I am {{ foo }}</div>
</template>

<script setup>
  defineProps({ foo: String });
</script>

现在，让我们将我们的新组件添加到 Vuetify defaults 配置对象中，并为它的foo prop 分配一个默认值:

import { createVuetify } from "vuetify";

export default createVuetify({
  defaults: {
    MyComponent1: {
      foo: "bar",
    },
  },
});

接下来，将useDefaults导入MyComponent1.vue中。这个函数有两个可选参数:

• props - 用于生成组件默认值的 props 对象
• name - 组件的名称。这用于引用 Vuetify 配置中定义的默认键

在你的模板中，将defineProps的返回值赋给一个变量，并将其传递给useDefaults:

<template>
  <div>I am {{ props.foo }}</div>
</template>

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

  const _props = defineProps({ foo: String });
  const props = useDefaults(_props, "MyComponent1");
</script>

注意，我们必须在模板中显式地使用props对象。这是因为 Vue 会自动展开defineProps中的值。

-<div>I am {{ foo }}</div>
+<div>I am {{ props.foo }}</div>

INFO

name参数是可选的，如果没有提供，则从组件的名称中推断出来。

当<MyComponent1>在模板中使用时，它使用 Vuetify 配置中分配的默认值:

<template>
  <MyComponent1 />
  <!-- I am bar -->
</template>

嵌套默认值

可以在组件链中分配嵌套默认值。这为您提供了无数种配置应用程序及其组件的方法。

让我们通过创建一个使用<MyComponent1>的新组件<MyComponent2>来扩展前面的示例example:

<template>
  <MyComponent1 />
</template>

<script setup>
  import MyComponent1 from "./MyComponent1.vue";
</script>

现在，让我们将<MyComponent2>添加到 Vuetify defaults 配置对象中，并为所有嵌套的<MyComponent1>组件的foo prop 分配一个默认值:

import { createVuetify } from "vuetify";

export default createVuetify({
  defaults: {
    MyComponent: { foo: "bar" },

    MyComponent2: {
      MyComponent: { foo: "baz" },
    },
  },
});

返回到MyComponent2.vue并导入并调用useDefaults可组合:

<template>
  <div>
    <slot />
  </div>
</template>

<script setup>
  import MyComponent1 from "./MyComponent1.vue";
  import { useDefaults } from "vuetify";

  useDefaults();
</script>

最后，将两个新组件添加到模板中并检查输出:

<template>
  <v-app>
    <v-main>
      <MyComponent1 />
      <!-- I am bar -->

      <MyComponent2>
        <MyComponent1 />
        <!-- I am baz -->
      </MyComponent2>
    </v-main>
  </v-app>
</template>

<script setup>
  import MyComponent1 from "./MyComponent1.vue";
  import MyComponent2 from "./MyComponent2.vue";
</script>

现在，无论何时在<MyComponent2>组件中使用<MyComponent1>，它都有一个不同的分配的默认值。