# vuetifyjs/vuetify `vuetify` > Vue Material 组件框架 **版本：** 4.0.1（2026 年 3 月） **标签：** v1-stable：1.5.24（2020 年 3 月），开发：4.0.1（2026 年 3 月），v2-stable：2.7.2（2024 年 2 月），下一个：4.0.1（2026 年 3 月），最新：4.0.1（2026 年 3 月） 2026 年），v3 稳定版：3.12.2（2026 年 3 月） **参考文献：** [文档]() — API 参考、指南 ## API 变更本节记录了特定于版本的 API 更改 - 优先考虑最近的主要/次要版本。 * 突破：“VRow”/“VCol”网格 — 使用 CSS“gap”而不是负边距进行彻底检修。删除了“dense”属性（使用“密度=“紧凑””），删除了“VRow”上的“align”/“justify”和“Vcol”上的“order”/“align-self”，以支持实用程序类[来源]() * 重大突破：MD3 排版 — 为符合 Material Design 3 标准而重命名的变体名称：`h1`-`h3` -> `display-*`、`h4`-`h6` -> `headline-*`、`subtitle-1`/`body-1` -> `body-large`、`button`/`subtitle-2` -> `label-large` [来源]() * 重大突破：MD3 高程 — 高程级别从 25 (0-24) 降低到 6 (0-5)，以与 MD3 密度无关的像素级别保持一致[来源]() * 破坏：`VBtn` 默认值 — 默认情况下删除了 `text-transform: uppercase`。 `$button-stacked-icon-margin` Sass 变量替换为 `$button-stacked-gap` [来源]() * 重大问题：`VSelect` / `VAutocomplete` / `VCombobox` — `item` 插槽属性重命名为 `internalItem`。 `item` 属性现在是 `internalItem.raw` 的别名 [来源]() * 重大问题：“VForm” 插槽 —“isValid”、“errors” 和“isDisabled” 插槽变量现在是展开的值，而不是“Ref”对象[来源]() * 新功能：`VSnackbarQueue` — 在 v4 中重写以支持同时显示多个小吃栏； `default` 插槽重命名为 `item` [来源]() * 新功能：`VRow` `gap` 属性 — 提供对网格间距的细粒度控制，接受数字、字符串或 `[x, y]` 数组[来源]() * 新功能：`VAvatarGroup`（实验性）——新的实验室组件，用于对具有重叠支持的多个化身进行分组[来源]() * 新功能：“VCommandPalette”（实验性）——新的实验室组件，为应用程序命令提供搜索和操作界面 [来源]() **还更改了：** 从实验室升级的 `VCalendar` 从实验室升级的 `VHotkey` 新的 `VToolbar` `location` 道具 · 新的 `VAvatar` `badge` 道具新的 `VProgressCircular` `reveal` 道具新的 · `VTreeview` `indent-lines` 道具新的 · `vuetify/styles/core` 新入口点 · `system` 默认主题 · `VSnackbar` `multi-line` 删除 · “VContainer”“填充高度”行为已更改 ## 最佳实践 * 在 `useHotkey` 可组合项中使用 `cmd` 修饰符以实现跨平台兼容性 - 自动解析为 Mac 上的 Command 和 PC 上的 Control [源]() // 首选：适用于 Mac 和 PC useHotkey('cmd+s', (e) => saveDocument(e)) // 避免：硬编码“ctrl”可能会导致冲突或在 Mac 上感觉不惯用 useHotkey('ctrl+s', (e) => saveDocument(e)) * 将“class”和“style”应用于“defaults”配置中的特定组件键 - 这些在“global”默认键中不受支持[源]() // 首选创建Vuetify({ 默认值：{ VBtn：{ 类：'文本无'，样式：{ textTransform：'无'} } } }) // 避免：类和样式在全局中被忽略创建Vuetify({ 默认值：{ 全局：{ 类：'text-none' } } }) * 通过重新定义 CSS 层顺序来解决 Vuetify 和 TailwindCSS 之间的样式冲突 - 将 Vuetify 的样式放置在优先级低于 Tailwind 基础层的专用层中[来源]() /* main.css */ @layer主题、基础、vuetify、组件、实用程序； @import 'vuetify/styles' 层(vuetify); @import 'tailwindcss'; * 使用“v-text-field”和“decimal.js”进行高精度十进制算术——“VNumberInput”在内部使用“toFixed()”，可能会受到标准 JavaScript 浮点不准确的影响[来源]() * 使用全局状态（例如 Pinia）和“v-snackbar-queue”来集中小吃栏消息——允许通过推送到共享数组来触发来自应用程序任何部分的通知[来源]() <模板>

* 使用“order”属性显式控制布局组件优先级 - 覆盖优先级仅由标记顺序决定的默认行为

* 利用 `useDate()` 的 `parseISO` 和 `toISO` 方法来标准化日期字符串 - `VDateInput` 和其他日期组件内部期望并返回原生 JS `Date` 对象[来源]() * 使用“v-command-palette”（实验性）进行键盘驱动的高级用户工作流程 — 提供预配置、可访问且可搜索的对话框界面，自动实现 ARIA 最佳实践[来源]() * 使用 `@layer vuetify-overrides` 块在 Vuetify 4 迁移期间恢复以前的负边距/填充网格行为 - 当现有布局依赖于遗留系统而不是新的 CSS `gap` 属性时，这是必要的[来源]() @layer vuetify-overrides { .v-行{ 间隙：未设置；边距： calc(var(--v-col-gap-y) * -.5) calc(var(--v-col-gap-x) * -.5); } }

Vuetify 熟练

包含技能