vuetify.js 相关问题

如何设置 v-select 组件的高度 - vuetify 3

如何在vuetify版本3中正确设置“v-select”组件的高度？ 在第二个版本中，道具高度用于此目的： 如何在vuetify版本3中正确设置“v-select”组件的高度？ 在第二个版本中，道具高度用于此目的： <v-select :items="..." height="30" /> 在版本 3 中此道具已被删除 要给出组件的高度，您需要将 height 属性添加到许多不同的类中，我觉得这不是一个好的解决方案，也许有人知道更好的方法 您可以使用 :deep CSS 选择器来覆盖 Vuetify 样式。 https://vuejs.org/api/sfc-css-features.html 在你的情况下是 :deep(.v-field__input){ height: 100px; }

图像未显示在 Vue.js/Vuetify 的 v-navigation-drawer 背景中

我目前正在使用 Vue.js 和 Vuetify 开发一个项目，在尝试将本地图像设置为背景时，我遇到了 v-navigation-drawer 组件的问题。 这是代码

如何禁用 vuejs v-table 列的排序功能？

我有一个v表，当用户单击标题时我需要删除禁用排序功能。 我怎样才能做到呢？

vue-i18n 不使用 vuetify 组件字符串

我尝试使用 vue-i18n 来翻译我的应用程序。我还使用 vuetify 和 vue cli。 目前我有英语和德语两种语言。 这是我的项目结构和代码。 main.js 导入...

Vuetify：全局配置不适用于卡片操作区域内的按钮

https://vuetifyjs.com/en/features/global-configuration/ 给出的示例 创建Vuetify({ 默认值：{ 电子名片：{ VBtn: { 变体: '概述' }, }, }, }) 好像只适用于v-

Vutify - 如何减小选项卡标题的大小？

我在我的应用程序中使用 v-tabs，但在移动设备上运行时它们占用了太多空间。如果我可以减少文本周围的填充，那么所有选项卡都可以在不使用箭头的情况下适合。 我已经尝试了所有...

我想让v卡透明，但它不起作用

我希望v卡是透明的，但里面的东西不应该是透明的。我怎样才能用CSS制作它？ 卡.vue 特克斯...

删除 vuetify 中 v-select 中的额外输入

我的 v-select 内部有一个额外的输入，这使得样式非常有问题。我的自定义组件没有添加它。我很确定这是一些 vuetify 的东西。有谁知道怎么去掉吗

Vuetify中有特定的数字输入组件吗？

我在 Element UI 中看到了一个用于管理项目数量的组件，它在这里： https://element.eleme.io/#/en-US/component/input-number 我想在 Vuetify 中使用类似的东西，b...

Vue 3 选项 -> 组合 Vuetify

为什么在使用 getApplication 函数的响应设置 startDate 后安装后，“startDate”没有反映在我的 v-date-picker 的 v-text 字段中？我的孩子

如何更改v-text-field的日期格式

我正在使用 Vuetify 开发 Vue.js 项目，并且遇到了类型为“date”的 v-text-field 的默认日期格式的问题。目前，格式为 mm/dd/yyyy，但...

从 VueJS 中的组件模板打开 Vuetify 对话框

我正在使用 VueJS Vuetify 框架，我需要打开一个对话框 - 从另一个模板作为组件模板导入。单击 App.vue 中的菜单按钮后，模态框应该...

Vuetify <v-data-table>自定义<th>标题

我正在使用 Vuetify 。 如何在表格标题上添加按钮？ 这段代码是我到目前为止所尝试过的。 我正在使用 Vuetify <v-data-table>。 如何在表格标题上添加按钮<th>？ 这段代码是我迄今为止尝试过的。 <v-data-table v-model="selected" :headers="headers" :items="desserts"> <template slot="items" slot-scope="row"> <th><button>button</button></th> </template> </v-data-table> <script> export default { data:() =>({ headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: true, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], }); </script> 请帮忙。 您可以使用header.<fieldname>插槽模板。 例如，要定位第二列，calories: <v-data-table v-model="selected" :headers="headers" :items="desserts"> <template v-slot:header.calories="{ header }"> {{ header.text }} <v-btn>Button</v-btn> </template> </v-data-table>

VueJS中如何获取v-textarea的selectionStart和selectionEnd属性？

我知道你可以通过在VueJS中使用DOM或$refs来获取普通的startSelection和selectionEnd属性。 然而，我正在努力完成同样的事情<v-textarea...</desc> <question vote="0"> <p>我知道你可以通过在VueJS中使用DOM或$refs来获取普通<pre><code><textarea></code></pre>的startSelection和selectionEnd属性。</p> <p>然而，我正在努力用 <pre><code><v-textarea></code></pre> 完成同样的事情。我用谷歌搜索了一下，大多数东西要么使用普通的 JS 与 <pre><code><textarea></code></pre> 或 VueJS，但也使用 <pre><code><textarea></code></pre>。</p> <p>示例代码：</p> <pre><code> <v-textarea :value="value" :label="label" hide-details="auto" :name="name" auto-grow no-resize clearable rows="1" @input="emitSelectedPositons" :error-messages="errorMessages" ref="vta" /> ... <script> .... methods: { emitSelectedPositons() { this.$emit('changed', { start: this.$refs.vta.selectionStart, end: this.$refs.vta.selectionEnd }) } } </script> </code></pre> <p>上面的代码对于两者都返回 <pre><code>undefined</code></pre>。</p> </question> <answer tick="true" vote="1"> <p><pre><code>$refs.vta</code></pre> 仅返回 v-textarea 元素，它是一个包含其自己的引用的包装元素，其中包括内部 <pre><code><textarea></code></pre> 输入元素。您可以访问内部元素来获取选择开始和选择结束，如下所示：</p> <pre><code>this.start = this.$refs.vta.$refs.input.selectionStart; this.end = this.$refs.vta.$refs.input.selectionEnd; </code></pre> <p><a href="https://codepen.io/yoduh/pen/LYBbgOX?editors=1011" rel="nofollow noreferrer">沙盒示例</a></p> </answer> <answer tick="false" vote="0"> <p>随着 Vuetify 升级到 <strong>Vuetify 3</strong>，<pre><code>this.$refs.vta.$refs.input.selectionStart</code></pre> 不再起作用。</p> <p>以下是如何访问 v-textarea 的选择开始</p> <pre><code>this.$refs.vta.$el.querySelector('textarea').selectionStart </code></pre> </answer> </body></html>

更改 Vuetify 数据表中默认选择和展开列的顺序

我有一个 Vuetify 2 数据表，它使用默认的选择和扩展功能。因此，我在第一列中获得展开图标，选择左侧第二列中的框。 我需要的是展示...

vuetify 图标未显示

我正在使用 vue.js 和 vuetify。我想添加一个图标，但它没有按预期工作（未渲染）。 我怎样才能解决这个问题？ 请参考以下代码： main.js 从“vue”导入 Vue 导入V...

‘v-slot’指令不支持任何修饰符

我正在使用 vuetify 的数据表，我们有不同的插槽和一些道具，例如下面 我正在使用 vuetify 的数据表，我们有不同的插槽和一些道具，例如下面 <template #header.data-table-select="{ on, props }"> <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox> </template> 我还使用 vue 的 eslint 插件来检查任何错误/错误代码/或任何违规，但是如果我在文件中使用上面的代码片段，它会给我错误 ‘v-slot’指令不支持任何修饰符 根据此文档，这是正确的https://eslint.vuejs.org/rules/valid-v-slot.html 但它没有任何例子来说明我们如何处理这种情况 我怎样才能删除这个警告/或使其正确，而不使其豁免 谢谢 我在您提供的代码中没有看到任何v-slot，因此我只能向您展示我的用例。 出现 Eslint 错误： <template v-slot:item.actions="{ item }"> 没有错误： <template v-slot:[`item.actions`]="{ item }"> 在eslint-plugin-vue@^7.1.0中，您可以在allowModifiers规则中使用vue/valid-v-slot选项。 // .eslintrc.js 'vue/valid-v-slot': ['error', { allowModifiers: true, }], vue/valid-v-slot #options 对我来说，settings.json 中的以下条目解决了问题： "vetur.validation.template": false 我尝试了 Hexodus 的答案，但在我的情况下模板根本没有渲染。 我让它与此完美配合，无需任何 eslint 规则修改： <template #[`item.actions`]="{ item }"> 编辑： 正如评论和 Hexodus 的（正确）答案所通知的，您可以通过使用返回字符串（模板）的动态槽名称来解决 linting 警告。不再建议“不启用”，因为这现在已成为标准规则。因此，我建议使用 Hexodus 方法，而不是完全禁用有效的 v 槽规则。 原帖： 你无法真正修复这个 linting 警告。 修饰符的 Vue 语法使用点来改变 a 的方式 指令函数（例如 v-model.number） Vuetify 动态命名其插槽的方式使用点来 选择组件的特定部分（#header.data-table-select）。 ESLint 无法区分您是否正在尝试在插槽上设置修饰符（这是不可能的），或者您的插槽名称是否包含点。 您可以做的最简单的事情就是禁用该规则。由于 eslint-plugin-vue 的任何基本配置默认情况下都不会启用“valid-v-slot”规则，因此您应该能够在 eslint 配置中的“rules”下找到它。 试试这个： <template v-slot:item.createdDate="{ item }"> 如果您使用格式vetur，请在 vscode 设置中添加此选项： "vetur.validation.template": false 也许这不是答案，你也可能不相信我的解决方案，但这就是我所做的。 ANS：我将 Vetur 降级到 0.23 版本！有效！ （等待解决该问题的新版本发布。 打开 VSCode 上的扩展侧面板，右键单击 Vetur 并选择 install other versions。 或者，如果您的代码工作正常，在 vue-eslint-plugin 错误之前的一行，您可以尝试 <!-- eslint-disable-next-line vue/no-v-html --> 禁用下一行的 eslint 或 <!-- eslint-disable --> 禁用其下方的所有禁用 linting。 对某些人有用，但对我不起作用，可能对你也不起作用。不管怎样，更喜欢 Vetur 降级 我正在使用 laravel 框架和 vuetify。之前的代码突然报红线 eslint 错误 - vue/valid-v-slot 指令、向模板添加多个根节点等等，不建议任何快速修复，但它们都工作正常。在我降级之前，我从搜索中得到的答案从未产生任何结果，任何其他解决方案都将受到欢迎！ 它对我有用： 在.vue中 <template v-slot:[getitemcontrols()]="props"> 在.js中 methods: { getitemcontrols() { return `item.controls`; }, 对我来说，这个配置添加到 package.json 有效 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/base" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } } 您可以按如下方式定义动态槽名称： <template #[`item.actions`]="{ item }"> // your code </template> 您可以在 Vue 官方文档中找到更多信息： https://vuejs.org/guide/components/slots.html#dynamic-slot-names

在 Vuetify 上垂直居中内容

有没有办法在 Vuetify 中垂直居中内容？ 使用 text-xs-center 辅助类，内容仅水平居中： 有没有办法在 Vuetify 中垂直居中内容？ 使用 text-xs-center 辅助类，内容仅水平居中： <v-container grid-list-md text-xs-center> <v-layout row wrap> <v-flex xs12> Hello </v-flex> </v-layout> </v-container> 从API，我测试了一些其他辅助类，例如align-content-center，但没有达到结果。 更新新的 vuetify 版本 在 v.2.x.x 中，我们可以使用 align 和 justify。我们有以下选项用于设置水平和垂直对齐。 道具align：'start','center','end','baseline','stretch' PRPS justify：'start','center','end','space-around','space-between' <v-container fill-height fluid> <v-row align="center" justify="center"> <v-col></v-col> </v-row> </v-container> 有关更多详细信息，请参阅此 vuetify grid-system 并且您可以在此处查看工作 codepen 演示。 原答案 您可以使用 align-center 表示 layout，使用 fill-height 表示容器。 v1.x.x 演示 new Vue({ el: '#app' }) .bg{ background: gray; color: #fff; font-size: 18px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script> <div id="app"> <v-app> <v-container bg fill-height grid-list-md text-xs-center> <v-layout row wrap align-center> <v-flex> Hello I am center to vertically using "align-center". </v-flex> </v-layout> </v-container> </v-app> </div> 在 Vuetify 2.x 中，v-layout 和 v-flex 分别替换为 v-row 和 v-col。要使内容垂直和水平居中，我们必须指示 v-row 组件来执行此操作： <v-container fill-height> <v-row justify="center" align="center"> <v-col cols="12" sm="4"> Centered both vertically and horizontally </v-col> </v-row> </v-container> align="center" 将使内容在行内垂直居中 justify="center" 将使内容水平居中在行内 fill-height 将使整个内容居中与页面相比。 对于卡片：简洁且适用于 v2+。这将为您提供一张内容水平和垂直居中的 v 卡： <v-card class="d-flex align-center justify-center" min-height="250"> Content here... </v-card> 代码笔 这是使用 grid 中可用的 Vuetify Vuetify 2.x 系统的另一种方法：https://vuetifyjs.com/en/components/grids <v-container> <v-row align="center"> Hello I am center to vertically using "grid". </v-row> </v-container> 仍然感到惊讶的是，没有人提出使用 align-center justify-center 来垂直和水平居中内容的最短解决方案。检查此 CodeSandbox 和下面的代码： <v-container fluid fill-height> <v-layout align-center justify-center> <v-flex> <!-- Some HTML elements... --> </v-flex> </v-layout> </v-container> 对于新的 Vuetify v3.0.0.0-beta 这对我有用： <v-container class="fill-height"> <v-row align="center" justify="center" class="fill-height"> <p>Center</p> </v-row> </v-container> <v-container>必须是紧接在<template>之后，如果中间有<div>，垂直对齐将不起作用。 <template> <v-container fill-height> <v-row class="justify-center align-center"> <v-col cols="12" sm="4"> Centered both vertically and horizontally </v-col> </v-row> </v-container> </template> 无需使用行或列...您可以将 vuetify 应用程序的主要内容居中，如下所示： <v-app> <v-main> <v-container fluid fill-height> <v-layout class="align-center justify-center"> <router-view></router-view> </v-layout> </v-container> </v-main> </v-app> 在我的示例中，第一个 v-for 将占据父元素的所有间距，填充高度将占据所有可用高度。这样我们就可以使用第二个 v 行来尽可能最佳地定位。 <v-row class="fill-height"> <v-row align="center" justify="center"> try TOO align="start" || align="center" || align="end" <br> justify="start" || justify="center" || justify="end" </v-row> </v-row> 请在此处检查网格文档： https://vuetifyjs.com/en/components/grids/#justify 在 Vuetify v2 中，您只需使用容器上的 d-flex、justify-center 和 align-center 类即可以最少的标记实现这一点： <div style="width: 100px; height: 100px; border: 1px solid black;" class="d-flex justify-center align-center" > Hello </div> 对我来说，align="center"足以将FOO垂直居中： <v-row align="center"> <v-col>FOO</v-col> </row>

v-bind：value 指令在 Vuetify 中对于 v-switch 输入不起作用

我有两种方式将属性与 v-switch 输入绑定。我正在使用 v-bind:value 作为给定的 我有两种方式将属性与 v-switch 输入绑定。我正在使用 v-bind:value 作为给定的 <v-switch v-bind:input-value="tabs" label="Show Tabs" @change="(val) => $sync('tabs', !!val)" /> 问题是，当从 prop 提供值时，有时会根据提供的数据切换渲染，有时则不会。 v-bind:input-value 完成了这项工作，但想了解根本问题，以便我可以为库本身做出贡献。 您的交换机需要 reactive、mutable Boolean 才能正常工作。 如果使用设置 <script setup> import { ref } from 'vue'; const myBoolean = ref( /* whatever determines Boolean */ ); </script> 注意ref包装纸。 然后，只要 ref 内的条件发生变化，您的 Vuetify 开关就会更新。 <v-switch v-model="myBoolean" @change="/* whatever function changes Boolean */" />

v-text-field type=date：限制未来日期

我看过很多关于如何使用 v-date-picker 限制未来日期的帖子，但是如何使用具有日期类型的 v-text-field 做同样的事情呢？我不想添加 v-date-picker bc