定义 Vuetify 3 配置默认值的问题

Question

注意：该问题已根据 @Moritz Ringler 的回答进行编辑/更新。

在我的 Laravel 10、Vuetify 3 项目中，我使用了许多使用多个 等的组件<v-text-field>, <v-textarea>, <v-select>。我想对所有组件使用相同的密度和变体设置，例如

<v-select
     density="compact"
     variant="outlined"
     v-model="lu_duration_id"
     :items="lu_duration"
     label="Duration"
></v-select>

我尝试在 中定义这些app.js，如下所示：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'


// For Vuetify material icons
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
const icons = {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    }
  }

 // default options
 const defaults = {
    global: {
        variant: "outlined",
    },
    VSelect: {
        density: "compact",
    },
};


const vuetify = createVuetify({
    components,
    directives,
    icons,
    defaults,
    })

默认选项在包含时提供了所需的效果，即我看到所有组件上的概述效果。createVuetify然而，CSS（所有组件的颜色和外观都会变得混乱。例如，这里是使用defaultsin之前的页面图像createVuetify：

并且，这是包含以下内容后的页面图像defaults：

面貌发生了<v-select>显着的变化。这是使用前页面的图像defaults

这是包含后的图像defaults

我观察到的另一件事是，即使在包含之前defaults，我的组件的外观也与 vuetify 网站上的组件略有不同。请注意，在下图中，第一个<v-text-field>具有焦点的图像具有粗边框，并且边框没有半径。甚至其他组件也有深色的底部边框。（我使用的是通过 npm 安装的 Vuetify 3.2.3 版本）

非常感谢任何解决此问题的提示。

Answer 1

我认为您正在寻找以下defaults房产：

export default createVuetify({
  defaults: {
    global: {
      variant: 'outlined',
    },
    VSelect: {
      density: "compact",
    }
  }
}

中的 propsglobal将为所有理解这些 props 的组件设置。使用 PascalCase 名称，您可以为各个组件设置默认值。

看一下片段：

export default createVuetify({
  defaults: {
    global: {
      variant: 'outlined',
    },
    VSelect: {
      density: "compact",
    }
  }
}

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify({
  defaults:{
    global:{
      density: "compact",
      variant: 'outlined',
    }
  }
})
createApp({}).use(vuetify).mount('#app')