Vuetify.js是Vue.js的语义材料组件框架2.将此标记用于特定于vuetify组件和api的问题。 （如果可能，提供CodePen或JsFiddle重现您的问题）
非常简单的代码。 页面标题 ... 非常简单的代码。 <div> <v-app-bar app flat > <v-app-bar-title> Page Title </v-app-bar-title> </v-app-bar> <v-container fluid> <v-card height="400" outlined flat > <v-card-title> Card Title </v-card-title> </v-card> </v-container> </div> 一切都按预期进行，但如果我将 height="auto" 添加到我的 <v-app-bar>，就会发生这种情况。 看起来 <v-main> 不再正确计算。如何避免这个问题？ 回答“为什么你无法将<v-app-bar>高度设置为自动”这个问题，你需要深入了解 Vuetify 源代码。 所以，基本上 <v-app-bar> 是 <v-toolbar> 组件的扩展。 查看源码，我们可以发现 height style prop 是通过以下代码计算的： genContent () { return this.$createElement('div', { staticClass: 'v-toolbar__content', style: { height: convertToUnit(this.computedContentHeight), }, }, getSlot(this)) }, 我们对 this.computedContentHeight 的计算方式感兴趣。看这段代码： computedContentHeight (): number { if (this.height) return parseInt(this.height) if (this.isProminent && this.dense) return 96 if (this.isProminent && this.short) return 112 if (this.isProminent) return 128 if (this.dense) return 48 if (this.short || this.$vuetify.breakpoint.smAndDown) return 56 return 64 }, 答案是：每次当你将一些字符串传递给 height 属性时，Vuetify 都会尝试将其转换为整数值。您试图传递 auto 值，但 parseInt("auto") 是 NaN。这就是为什么你不能传递这个值。我认为，Vuetify 文档中没有很好地解释。 如果您真的想要设置height:auto，您可以为您的style="height: auto"组件设置<v-app-bar>。但是，正如 @yoduh 已经说过的，这可能不是你想要的。 使用 height="auto"，v-main 不再知道使用多少填充来从应用程序栏偏移页面内容，因为它无法提前知道 height=auto 最终会以像素为单位，因此v-main 最终位于应用栏后面的视口顶部。为了避免这个问题，不要使用 height="auto"。如果您想要较小的应用程序栏，vuetify 提供了您可以使用的 dense 属性，或者您始终可以指定特定的高度像素值 我使用的解决方法是在 css 中显式设置高度。简单地在组件上设置 style="height: auto" 是行不通的，因为 vuetify 会覆盖它。为您的组件提供一个 ID，并将类似以下内容添加到您的 css 中： <style lang="scss"> #journal-toolbar { height: auto !important; } !important将覆盖vetify添加的计算值。 注意：重写样式可能会产生意想不到的后果，所以要好好测试。它适用于我的场景，其中涉及动态大小的工具栏扩展。
我有一个自动完成输入，带有附加的内部图标，该图标附加了单击功能，然后启用了可清除功能。如果您单击可清除，则会出现选项菜单，如果您单击附加...
当我在分页的第 2 页时 我的选项看起来像这样 然后，我创建一条记录，要求我在表上调用 API 来 updateData()。 我想将我的分页重置回...
我有这个组合框 @change 调用 API + 填充列表 - 完成 ✅ @select doSomething() - 未完成 ❌ 我很难检测出选择了什么。前任。如果我选择“马萨诸塞州”我想要...
我正在使用v-expansion-panels，当它打开时加载一个v-data-table，总是显示所有所以有时它可能是太多数据，所以我想添加一个v-lazy组件，我怎样才能添加它？ 我正在使用 v-expansion-panels，当它打开时加载一个 v-data-table，总是显示所有所以有时它可能是太多数据，所以我想添加一个 v-lazy 组件，我如何可以添加吗？ <v-data-table :headers="headers" :style="!$vuetify.breakpoint.mobile ? 'width: 40%' : 'width: 100%'" :items="item.Data" :items-per-page="-1" :no-data-text="i18next.t('General:noHayResultados')" :footer-props="{ itemsPerPageText: i18next.t('General:itemsperpage'), itemsPerPageAllText: i18next.t('General:todos') }"> <template v-slot:footer.page-text="{pageStart, pageStop, itemsLength}"> {{pageStart}} - {{pageStop}} {{i18next.t('General:de').toLowerCase()}} {{itemsLength}} </template> </v-data-table>` 我尝试用计算方法拼接项目： lazyItems() { return this.items.slice(0, 50); }, 但只加载50个 您可以按照数据表-服务器端表了解解决您的问题。基本上，当您获取按照 pageNumber、pageSize 过滤的数据时，您应该有 pageNumber 和 pageSize（每页项目）。然后，你就可以得到数据了pageSize。 例如，如果 pageSize = 10，pageNumber = 1，您将获取从 1 到 10 的数据，而 pageSize = 10，pageNumber = 2，您将获取从 11 到 20 的数据，而不是全部。
Vue.js/Vuetify 3 - 更改主题会产生“无法分配给“名称”，因为它是只读属性”错误
我正在尝试使用按钮在浅色模式和深色模式之间切换我的 vuetify 3 主题。 似乎 Vuetify 文档使用 theme.global.name 设置主题，但这不起作用，因为它是一个 reado...
有没有办法去除阴影，或者强制 vuetify 菜单与屏幕左侧完全对齐？
我正在尝试在侧边栏导航中使用 vuetify 菜单。我希望菜单能够与屏幕左侧完美对齐。相反，我得到的是菜单坚持积极......
我是 Vuetify 的新手，正在尝试构建一个 UI，显示已找到的 Wifi 网络以及每个 Wifi 属性的表格。对于每个已知网络，用户应该可以选择修改存储的密码...
vuetify 文档中有一个默认表： https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows td 和 th 元素的默认内边距是左右 16px。 怎么会...
AppDateTimePicker 在 Vuexy 主题的 Modal 中选择日期后关闭
我正在使用 Vuexy 主题构建 Vue.js 应用程序。 我在模态中有一个日期时间选择器。我的问题是，当我单击 datetimepicker 组件中的日期时，它不会保持打开和关闭状态，并且模态 cl...
Vuetify 3 文本在 v-autocomplete 上不会被省略
我正在使用 Vuetify 3 并尝试使用 text-overflow: ellipsis 截断 v-autocomplete 组件中的长文本，但它似乎不起作用。这是我的代码： 我正在使用 Vuetify 3 并尝试使用 text-overflow: ellipsis 截断 v-autocomplete 组件中的长文本，但它似乎不起作用。这是我的代码： <div id="app"> <v-app id="inspire"> <v-row align="center"> <v-col cols="12"> <v-autocomplete :items="items" :menu-props="{ top: true, offsetY: true }" label="Label" class="basic" ></v-autocomplete> </v-col> </v-row> </v-app> </div> CSS .basic{ width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } JS new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ items: ['Foo', 'Bar', 'Fizz', 'Buzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'], }), }) 这里进行测试 https://codepen.io/luigisaggese/pen/mdgMRBw 添加 maxWidth 属性可以解决问题（例如 200） :menu-props="{ top: true, offsetY: true, maxWidth:200}"
给定一个非常小的 Vue 应用程序，其中包含一个将嵌入到 iframe 中的 Vuetify 选项卡组件 （复制链接） 假设有一个非常小的 Vue 应用程序，其中包含一个将嵌入到 iframe 中的 Vuetify 选项卡组件 ( 转载链接 ) <template> <v-tabs bg-color="primary" density="compact" /> </template> 运行小应用程序时，它将呈现垂直滚动条，但页面上有足够的空间。我该如何解决这个问题？ 如果即使页面上有足够的空间，带有 Vuetify 选项卡组件的 Vue 应用程序也会呈现垂直滚动条，这可能是由于 Vuetify 的默认样式或 iframe 中的 CSS 冲突造成的。您可以尝试使用以下几种方法来修复此行为： 自定义样式：应用自定义 CSS 来覆盖任何可能导致垂直滚动条不必要出现的默认样式。您可以针对导致问题的特定元素并相应地调整其样式。 调整容器大小：确保iframe内Vue应用程序的容器有足够的高度来容纳内容，而不需要滚动条。您可以调整 iframe 或父文档中容器元素的高度。 Vuetify 配置：检查 Vuetify 是否提供任何配置选项，允许您控制选项卡组件的行为，例如调整填充、边距或其他与布局相关的属性。 检查样式：使用浏览器开发人员工具检查应用于 iframe 内元素的样式。识别可能导致滚动条意外出现的任何冲突样式或属性。 使用overflow:hidden:如果你确定有足够的空间并且滚动条由于溢出而出现，你可以尝试对iframe内的容器元素应用overflow:hidden以防止滚动条出现。 以下示例说明了如何应用自定义样式来调整选项卡组件的行为： <template> <v-tabs class="custom-tabs" bg-color="primary" density="compact" /> </template> <style> .custom-tabs { /* Adjust padding or margins if necessary */ padding: 0; margin: 0; } </style> 确保将 .custom-tabs 替换为针对选项卡组件或其容器的适当 CSS 选择器。 如果这些方法都不起作用，提供更多上下文或代码片段可能有助于更准确地诊断问题。
AWS Lambda 无服务器框架自定义字体 - Vuetify .woff .ttf 文件未呈现
我使用无服务器框架将我的 Vuetify 版本部署到 AWS lambda 函数/API 网关。使用 npxserve -s dist ，一切都在本地正确渲染 然而，当我使用express来...
我想验证是否已使用 v-file-input 和 vee-validate 中的 ValidationProvider 选择文件。 下面是我的代码： 我想验证是否已使用 v-file-input 和 vee-validate 中的 ValidationProvider 选择文件。 下面是我的代码： <v-flex> <ValidationProvider rules="required" v-slot="{ errors }"> <v-file-input show-size accept=".xlsx" placeholder="Click here to select your file" label="File name" :error="errors.length > 0" :error-messages="errors[0]" @change="selectFile" > </v-file-input> </ValidationProvider> </v-flex> 不知怎的，验证有效，但即使在我选择了一个文件之后，它也工作得很好： 我不知道我做错了什么？ 发现我必须这样做，不知道为什么我的上面不起作用： rules: [ v => !!v || 'File is required', v => (v && v.size > 0) || 'File is required', ] 我的表格： <v-flex> <ValidationProvider :rules="rules" v-slot="{ errors }"> <v-file-input show-size accept=".xlsx" placeholder="Click here to select your file" label="File name" :error="errors.length > 0" :error-messages="errors[0]" @change="selectFile" > </v-file-input> </ValidationProvider> </v-flex> https://codepen.io/subashdbc/pen/eYpVOKq 在此发布代码以帮助任何需要此代码的人。 您只需使用 Vuetify v-file-input 即可通过 :rules 的 prop 获得此行为 - 不需要 VeeValidate。 <template> <v-file-input multiple :rules="[rules.requiredFile]" ></v-file-input> </template> <script setup lang="ts"> const rules = { requiredfile: (v: file) => { if (v.length == 0) { return "Must select at least one file."; } }, }; </script>
我正在为我的作品集编写一个个人项目。 我正在做一个注册网站。 因此，用户将填写：个人数据、运输信息，然后将看到回顾。 我有一个视图（Register.vue），我...
在 vue 3、vuetify 和 laravael 中出现错误“camelize 不是函数”
我正在使用 VueJS、Vuetify 和 Laravel 构建 Web 应用程序，突然收到此错误：这就是错误 未捕获的类型错误：camelize 不是函数 在 Expand_transition_default (...
我试图在 v-data-table 外部的另一个容器中单击时显示 v-data-table 行的数据。我尝试了可扩展的 v-data-table 行，但这根本不起作用，所以尝试这个...
我正在发送 v-autocomplete 项目属性上值为 1-100 的数组。但滚动条上只显示 40-50 之前的数字。 我正在发送 v-autocomplete 项目属性上值为 1-100 的数组。但滚动条上只显示 40-50 之前的数字。 <template> <v-app> <v-container> <v-autocomplete label="Autocomplete" :items="CountList" variant="outlined" > <template #item="{ item }"> <v-list-item>{{ item.raw }}</v-list-item> </template> </v-autocomplete> </v-container> </v-app> </template> <script setup> import { ref, inject } from 'vue' const CountList = ref([]) for (let i = 1; i <= 100; i++) { CountList.value.push(i) } </script> 在 dwopdown 列表中应该显示直到 100 的数字。但是当我使用 时，直到 100 为止都不会显示完整的数字。 我查看了 vuetify 文档，在 v-autocomplete 的项目槽部分中它说： “定义自定义项目外观。此插槽的根元素必须是应用了 v-bind="props" 的 v-list-item。props 包含默认选择列表行为所需的所有内容 - 包括标题、值、单击处理程序、虚拟滚动以及使用 item-props 添加的任何其他内容。” 所以我想你需要将道具绑定到你的插槽上。这显示了 100 以内的所有项目。 <template #item="{ props, item }"> <v-list-item v-bind="props" :title="item.raw"/> </template> 游乐场 您可以添加 item-title 属性，如下所示： <v-autocomplete label="Autocomplete" :items="CountList" variant="outlined" :item-title="item => item" > </v-autocomplete>
如何解决：无法读取 Vuetify 和 Vue3 的未定义属性（读取“mdAndUp”）
我正在使用 Vue3 和 Vuetify，在尝试访问 $vuetify.breakpoint.mdAndUp 时遇到了这个问题 这是错误信息 未捕获的运行时错误： 无法读取未定义的属性（readi...
我是 Vuetify 的初学者。 我想在我的网站上创建一个按钮，如下所示： 我是Vuetify的初学者。 我想在我的网站上创建一个像这样的按钮： <v-btn class="v-btn white--text mx-1 px-6" elevation="2" x-small rounded color="#BB86FC">text</v-btn> 我还添加了 <v-hover> 标签到我的代码中： <v-hover> <v-btn class="white--text mx-1 px-6" elevation="2" x-small rounded color="#BB86FC">text</v-btn> </v-hover> 并在我的CSS中添加样式： .v-btn:hover: 但不起作用。 如何给它一个不同的style来更改background color，以便将鼠标悬停在按钮上时，颜色变为“红色”？ 您可以在 v-slot 上添加 v-hover 并在按钮的 style-binding 中使用它，如下所示： new Vue({ el:"#app", vuetify: new Vuetify() }); <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"> <v-app id="app"> <v-hover v-slot="{ hover }"> <v-btn class="v-btn white--text mx-1 px-6" elevation="2" x-small rounded :style="{ 'background-color': hover ? 'red' : '#BB86FC' }" >text</v-btn> </v-hover> </v-app> 此外，对于 v-btn，您只有指令颜色，因此您可以使用 Majed Badawi 编写的代码，但将样式更改为 :color="hover ? 'red' : 'blue'" 让我们更深入一点.. 来自 Vuetify 3： v-hover 组件提供了一个简单的界面，用于处理任何组件的悬停状态。它是一个无渲染组件，使用 default slot 提供对其内部模型的范围访问；以及用于修改它的鼠标事件侦听器。 来自 Vue.js 3： 正如渲染范围中所讨论的，插槽内容无权访问子组件中的状态。但是，在某些情况下，如果槽的内容可以使用来自父作用域和子作用域的数据，则可能会很有用。为了实现这一点，我们需要一种方法让子进程在渲染时将数据传递到槽。事实上，我们完全可以做到这一点 - 我们可以将属性传递到插槽出口，就像将 props 传递到组件一样。 使用 Vuetify 3 和 Vue.js 3 的一个实现示例如下： <v-hover v-slot="{ isHovering, props }"> <v-btn v-bing="props" :color="isHovering ? red : blue" text="cancel" /> </v-hover> 我们正在 v-hover 组件中重组变量，以便我们可以在父组件的槽中使用它们。 Vuetify 3 的工作方式是将 props 绑定到它需要监听的组件上，这样它就知道何时生成悬停效果。 v-slot 通过槽机制提供子组件和父组件之间的双向绑定。