-
在 useHotkey 组合式函数中使用 cmd 修饰符以实现跨平台兼容性 — 在 Mac 上自动解析为 Command 键，在 PC 上解析为 Control 键 来源
// 推荐：在 Mac 和 PC 上都能工作
useHotkey('cmd+s', (e) => saveDocument(e))
// 避免：硬编码 'ctrl' 可能在 Mac 上导致冲突或感觉不地道
useHotkey('ctrl+s', (e) => saveDocument(e))
-
在 defaults 配置中将 class 和 style 应用到特定的组件键 — 这些在 global 默认键中不受支持 来源
// 推荐
createVuetify({
defaults: {
VBtn: {
class: 'text-none',
style: { textTransform: 'none' }
}
}
})
// 避免：在 global 中 class 和 style 会被忽略
createVuetify({
defaults: {
global: { class: 'text-none' }
}
})
-
通过重新定义 CSS 层顺序来解决 Vuetify 和 TailwindCSS 之间的样式冲突 — 将 Vuetify 的样式放在一个专门的层中，其优先级低于 Tailwind 的基础层 来源
/* main.css */
@layer theme, base, vuetify, components, utilities;
@import 'vuetify/styles' layer(vuetify);
@import 'tailwindcss';
-
将 v-text-field 与 decimal.js 结合使用以进行高精度十进制算术运算 — VNumberInput 内部使用 toFixed()，可能会受到标准 JavaScript 浮点数精度问题的影响 来源
-
使用全局状态（例如 Pinia）和 v-snackbar-queue 来集中管理 snackbar 消息 — 允许通过向共享数组推送消息，从应用程序的任何部分触发通知 来源
<template>
<v-app>
<v-snackbar-queue v-model="messages.queue" />
</v-app>
</template>
-
使用 order 属性来显式控制布局组件的优先级 — 覆盖了默认行为（默认情况下优先级仅由标记顺序决定） 来源
<v-navigation-drawer />
<v-app-bar :order="-1" />
-
利用 useDate() 的 parseISO 和 toISO 方法来标准化日期字符串 — VDateInput 和其他日期组件内部期望并返回原生的 JS Date 对象 来源
-
使用 v-command-palette (实验性) 实现键盘驱动的专业用户工作流 — 提供一个预配置、可访问且可搜索的对话框界面，自动实现 ARIA 最佳实践 来源
-
在 Vuetify 4 迁移期间，使用 @layer vuetify-overrides 块来恢复之前的负边距/内边距网格行为 — 当现有布局依赖于旧系统而不是新的 CSS gap 属性时，这是必要的 来源
@layer vuetify-overrides {
.v-row {
gap: unset;
margin: calc(var(--v-col-gap-y) * -.5) calc(var(--v-col-gap-x) * -.5);
}
}
