Vuetify.js是Vue.js的语义材料组件框架2.将此标记用于特定于vuetify组件和api的问题。 （如果可能，提供CodePen或JsFiddle重现您的问题）
Vuetify 2 v 菜单左侧 | （Vuetivy 3 替补）
我正在尝试制作一个 Vue&Vuetify 应用程序，并且我一直在寻找一种方法使我的菜单下拉菜单位于左侧 标题下拉中心居中对齐 在 vuetify 3.0 中我们可以使用“位置”，但是这个
正确使用 click:outside 和 vuetify 对话框
我有一个 v 对话框，可以在需要时弹出日期选择器。为了展示它，我将一个值与 v-model 绑定。我使用 click:outside 事件来触发应该关闭它的函数，一旦我...
V-Text-field type="date" 问题 Vuetify Javascript
我在 Safari 中遇到仅显示日期初始状态的问题 当在 Safari 上加载视图时，它会自动显示今天的日期，甚至我的初始状态是： sell_act_at:"...
如何在移动视图上隐藏或禁用 vuetify 3 <v-data-table> 的“排序依据”输入和标签
我正在使用 vuetify 显示一些数据： 手机查看： 代码： 我正在使用 vuetify <v-data-table> 显示一些数据： 手机查看： 代码： <v-data-table-server :items-per-page="itemsPerPage" :headers="headers" :items="serverItems" :items-length="totalItems" :loading="loading" :search="search" item-value="id" fixed-header no-data-text="Sin datos" @update:options="loadItems" items-per-page-text="autos por página" loading-text="obteniendo datos..." > 专栏： headers: [ { title: 'Patente', key: 'patente', sortable: false }, { title: 'Marca', key: 'marca', sortable: false }, { title: 'Modelo', key: 'modelo', sortable: false }, { title: 'Precio', key: 'precio', sortable: false }, { title: 'Caja', key: 'caja', sortable: false }, { title: 'Combustible', key: 'combustible', sortable: false }, { title: 'Pasajeros', key: 'pasajeros', sortable: false }, { title: 'Descripcion', key: 'descripcion', sortable: false }, { title: 'Foto', key: 'fotos', sortable: false }, { title: 'Opciones', key: 'options', sortable: false } ] 我尝试将列属性 sortable 设置为 false 但没有帮助。 除了CSS解决方案之外，还没有找到任何方法。 .v-data-table-headers--mobile { display: none; } 或者，如果您不希望表格在移动设备上响应，您可以执行以下操作： <v-data-table-server ... mobile-breakpoint="0">
如何在移动视图上隐藏或禁用 vuetify 3 <v-data-table> 的“排序依据”输入和标签
显示过滤器的移动视图 我正在使用 vuetify 显示一些数据： 显示过滤器的移动视图 我正在使用 vuetify 来显示一些数据： <v-data-table-server :items-per-page="itemsPerPage" :headers="headers" :items="serverItems" :items-length="totalItems" :loading="loading" :search="search" item-value="id" fixed-header no-data-text="Sin datos" @update:options="loadItems" items-per-page-text="autos por página" loading-text="obteniendo datos..." > 栏目： headers: [ { title: 'Patente', key: 'patente', sortable: false }, { title: 'Marca', key: 'marca', sortable: false }, { title: 'Modelo', key: 'modelo', sortable: false }, { title: 'Precio', key: 'precio', sortable: false }, { title: 'Caja', key: 'caja', sortable: false }, { title: 'Combustible', key: 'combustible', sortable: false }, { title: 'Pasajeros', key: 'pasajeros', sortable: false }, { title: 'Descripcion', key: 'descripcion', sortable: false }, { title: 'Foto', key: 'fotos', sortable: false }, { title: 'Opciones', key: 'options', sortable: false } ], 我尝试将列属性“sortable”设置为 false 除了CSS解决方案之外，还没有找到任何方法。 .v-data-table-headers--mobile { display: none; }
如何将自定义函数绑定到 vuetify Stepper 的上一个和下一个按钮
我正在尝试在 vuetify 中设置登录过程，其中第一步，输入您的电子邮件地址，第二步，输入密码，第三步，输入第二步的 TOTP 信息 -因素...
我的 sweelart2 总是在我的 v-dialog (vuetify 3) 后面？
为什么我的 sweetalert2 总是在 vuetify3 中的 v-dialog 后面？ 有人可以帮我解决这个问题吗？ 我尝试了 sweetalert2 的一些替代方案，但没有解决方案。 当我使用 sweetalert 时...
我一直在遵循本指南及其所有步骤：https://www.youtube.com/watch?v=To5XzHlTS_E。但是，当我运行“npm run dev”时，似乎样式没有正确应用，...
使用@koumoul/vjsf在Vue3中生成基于模式的表单
如何在 vue 3 中使用 VJSF？我使用 vite 作为构建工具。 我按照文档尝试了安装步骤。但是我收到来自 vite 的错误， 强制重新优化
如何在使用 vuetify 构建的 Web 中将 v-app-bar 和 v-system-bar 居中
环境：Nuxt + Vue 3.x + Vuetify 3.x 下面是我的网页和pages/index.vue 环境：Nuxt + Vue 3.x + Vuetify 3.x 下面是我的网页和pages/index.vue <script setup lang="ts"> </script> <template> <v-app style="width: 800px;margin: auto;" class="border-red " > <v-system-bar style="width: 800px;margin: auto;">System bar</v-system-bar> <v-app-bar class="border-blue " style="width: 800px;margin: auto;"> App Bar <v-app-bar-title>APP TITLE</v-app-bar-title> </v-app-bar> <v-main> <v-container > <h1>HELLO MAIN</h1> </v-container> </v-main> <v-footer> FOOTER </v-footer> </v-app> </template> <style scoped> .border-red { border: 5px solid red; } .border-blue { border: 5px solid blue; } </style> 我想知道如何像 v-main 和 v-footer 一样使系统栏和应用栏居中。 我认为您正在寻找 V 型布局。只需用它包裹您的内容即可。 <v-layout> <v-system-bar>System bar</v-system-bar> <v-app-bar class="border-blue" style="width: 800px; margin: auto" > App Bar <v-app-bar-title>APP TITLE</v-app-bar-title> </v-app-bar> <v-main> <v-container> <h1>HELLO MAIN</h1> </v-container> </v-main> <v-footer> FOOTER </v-footer> </v-layout> 游乐场 文档
我目前正在尝试制作我们的 springboot 应用程序的前端，一个 Vuetify (vue.js) 应用程序。之前——在我介绍 Vuetify 之前——我一直在使用这个资源，并对 V 进行细微调整...
创建一个 v-btn-toggle，其按钮垂直对齐，而不是水平对齐
我目前正在尝试使用 VueJS 和 Vuetify 创建一个测验。我正在尝试垂直排列用户可以选择的答案。为此，我尝试使用 v-btn-toggle 组件。然而...
Vuetify，v-data-table标题如何仅在箭头图标单击上排序而不是在项目名称上排序（由v-text-field替换）
我希望通过文本搜索过滤我的标题项，因此我用 v-text-field 替换了我的标题项。所以标签就是占位符。 问题是，当我单击 v-text-field 时，它......
将 v-date-picker 绑定到带有格式化日期的 v-text-field
我正在尝试将 v-date-picker 选项绑定到数据格式化的 v-text-field 。我已经在我的应用程序中使用了一个名为 formateDate() 的函数，我正在尝试将其应用于...
我正在使用 Vuetify 的 v-btn 按钮组件，并通过 color 属性设置各种颜色。一旦用户单击按钮，我将禁用设置为 true，这样他们就无法再次单击它，但按钮丢失了......
我对 vue-ionic 感到困惑。我决定用 Ionic 制作移动应用程序。没关系。然后我就不能使用Angular了。我为前端安装了 vuejs。 (vue-ionic)。之后我决定使用 Vuetify
Vuetify 日期选择器从 S M T W T F S => Sun Mon Tue Wed Thu Fri Sat 更改工作日标签
我的工作日标签有问题，我找不到将它们更改为这种格式的方法 （从 M 到 Mon 等...） 我的代码： 我对工作日标签有疑问，我找不到将它们更改为这种格式的方法 （从 M 到 Mon 等...） 我的代码： <v-date-picker :weekday-format="customWeekDays" v-model="selectedDate" show-adjacent-months ></v-date-picker> 和 const customWeekDays = computed(() => { return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; }); const selectedDate = ref<Date[] | undefined>(undefined); const selectedDateDisplay = computed(() => { if (selectedDate.value instanceof Date) { return format(selectedDate.value, 'dd MMM yyyy'); } return ''; }); 我已经尝试过这个：工作日格式（如何在 Vuetify 的日期/月份选择器中更改日期格式（M > Mo，F > Fr ...））道具，但它似乎对我不起作用 VDatePicker 使用日期适配器中的 getWeekdays() 来打印工作日标签（请参阅代码）。默认实现可以在here找到。 您可以将适配器更换为其他适配器，如 文档中所述。 这里是一个 playground 示例，其中覆盖了 getWeekdays()（检查 vuetify.js 选项卡 - 我正在使用 @date-fns/luxon 适配器，因为它很容易进入 Playground，您可以轻松覆盖默认适配器或在您的项目中选择一个不同的）。 可能不像您希望的那么简单，但就是这样。希望有帮助。
我是 Vue 2 的新手，并试图找出导航抽屉为什么会这样。以下代码笔包含一个小导航。可以使用 V 形图标打开和关闭。这是...
我正在运行一个查看 Vuetify 断点的 switch/case，但它不只是获取名称并给出我想要的 int，它最终总是会获取“
如何在 vue 3 组合 api 中将组件作为 props 传递？
我想将 props customActionComponent 作为组件传递，并且需要在子组件中渲染 FlightDetail.vue 我想将 props customActionComponent 作为组件传递，并且需要在子组件中渲染 FlightDetail.vue <template> <ComponentCard title="Flight Details" subtitle="March 25th" :tableComponent="FlightDetailTable" :actionComponent="customActionComponent" /> </template> <script setup> import ComponentCard from '@/components/ComponentCard.vue' import FlightDetailTable from '@/components/FlightDetailTable.vue' const customActionComponent = { template: ` <v-row align="center"> <v-col> <v-btn class="rounded-pill ml-3 custom-button"> <v-icon>mdi-arrow-left</v-icon> </v-btn> </v-col> <v-col class="d-flex justify-end"> <v-btn class="rounded-pill custom-button"> Flight </v-btn> <v-btn class="rounded-pill ml-4 mr-4 custom-button"> Delay </v-btn> </v-col> </v-row>`, } </script> <style scoped> .custom-button { background-color: #114b5f; color: white; font-weight: bold; } </style> ComponentCard.vue <script setup> import { defineProps } from 'vue' const props = defineProps({ title: String, subtitle: String, tableComponent: Object, actionComponent:Object, }); </script> <template> <v-card variant="text"> <v-card-item> <v-card-title style="color: #114b5f;">{{ props.title }}</v-card-title> <v-card-subtitle style="color: #114b5f;">{{ props.subtitle }}</v-card-subtitle> </v-card-item> <v-card-text> <component :is="props.tableComponent" /> </v-card-text> <v-card-actions v-if="props.actionComponent"> <component :is="props.actionComponent" /> </v-card-actions> </v-card> </template> tableComponent 可以渲染成功，但actionComponent 不可见。 定义 customActionComponent 并在子组件中作为 props 传递的最佳方法是什么 customActionComponent是一个尚未被Vue编译的组件对象。如果您想让它工作，请在导入映射中将 https://unpkg.com/vue@3/dist/vue.esm-browser.js 替换为 https://unpkg.com/vue@3/dist/vue.esm.js 以包含编译器。这可能会给您的应用带来更大的尺寸。 如果可以的话，建议使用slots。 我肯定会在这里使用named slots。我不明白你为什么想用道具来做到这一点。