vuetify.js 相关问题

导航抽屉意外打开

我是 Vue 2 的新手，并试图找出导航抽屉为什么会这样。以下代码笔包含一个小导航。可以使用 V 形图标打开和关闭。这是...

如何让 Switch/Case 只查看特定断点？

我正在运行一个查看 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。我不明白你为什么想用道具来做到这一点。

Vuetify textarea - 事件传播实际上是如何工作的？

我遇到了一个奇怪的情况，组件的使用如下： 我遇到了一个奇怪的情况，使用以下组件： <template> <v-app> <v-container> <v-menu v-model="menu" :close-on-content-click="false"> <template #activator="{ props }"> <v-btn v-bind="props"> Open </v-btn> </template> <v-card> <v-card-text> <v-form> <v-textarea label="sample text"></v-textarea> </v-form> </v-card-text> <v-card-actions> <v-btn @click="menu = false"> Close</v-btn> </v-card-actions> </v-card> </v-menu> </v-container> </v-app> </template> <script setup> import { ref } from 'vue' const menu = ref(false) </script> Vue Playground 链接 通常，当在 v-textarea 内按 Enter 时，结果将是添加换行符。 然而，在这种情况下，打开菜单写一些东西并按 Enter 键不会执行任何操作。 如果我删除 v-card-actions 组件，按 Enter 键将添加换行符，但也会关闭菜单。这不是所需的行为（这是一个减少示例。）。 如果我随后将 @keydown.enter.stop="" 事件处理程序添加到 v-textarea，一切都会按我的意愿进行。 由于最后一步使其工作，我怀疑事件传播中发生了一些奇怪/有缺陷的事情，或者我没有正确理解。 这是怎么回事？ 它看起来是由 v 菜单上的 function 引起的，该函数在收到 Enter keydown 事件时运行。该函数调用 e.preventDefault()，因此可以防止出现新行。 只要 keydown 事件在 v 菜单之前停止传播，这种情况就不会发生。您可以将 @keydown.enter.stop 移动到 v-textarea 和 v-card（包括）之间的任何元素上，然后将创建新行。

v-select 根据所选项目的长度更改宽度

我在弹性盒内使用 v-selects，我希望 v-selects 的大小取决于弹性盒设置，而不是根据选择的是长项目还是短项目而变化。 有没有...

Vuetify 中的 Html 主题集成

我可以将 CSS 和 JavaScript 文件导入到 Vuetify 中以导入某些组件吗？或者我可以放置一个作为基本 HTML 主题的整个主题吗？ 比如我发现了一个专业人士需要的工具...

Vuetify：如何获取当前主题颜色？

我正在使用 Nuxt 和 Vuetify。如果我写 ，Nuxt 会生成 标签，并且链接文本带有下划线和蓝色。 我可以按如下方式删除下划线： A { 文本装饰：无； }

如何在 Vuetify 3 应用程序中利用多种布局

当我使用 npm 创建基本的 vuetify 应用程序时，我会加载包含 default.vue 及其组件的布局文件夹。 然后在路由器中我有以下内容： /** * 路由器/index.ts...

Vuetify.js：<v-text-field>圆角

如何在 Vuetify 中获得 的圆角？ 如何在 Vuetify 中获得 <v-text-field> 的圆角？ <v-flex xs12> <v-text-field style="border-radius:50px" label="Text field" solo ></v-text-field> </v-flex> 我尝试使用 border-radius 属性来打扰容器 <v-flex> 和 <v-text-field> 本身，但它不起作用。 Codepen。 您可以将 rounded 属性添加到 v-text-field (vuetify docs) <v-text-field label="Text field" solo rounded ></v-text-field> 每当我需要更改 Vuetify 样式时，我都会向包含元素添加一个类，然后添加您的样式。由于特殊性，使用 Vuetify（像任何框架一样）可能会令人沮丧。在这种情况下，您至少需要 3 级特异性。 模板 <v-text-field label="Text field" solo class="my-input" ></v-text-field> CSS .my-input.v-input .v-input__slot { border-radius: 100px; } 对于 vuetify 3 这对我不起作用，所以我使用了从 dom 获取的 CSS 选择器 .v-text-field ::v-deep(.v-field) { border-radius: 8px; } 希望这对 vuetify 3 有帮助 对于 vuetify 3，您可以添加 rounded 并传递尺寸（即 sm、md、lg 等） <v-text-field rounded="lg" solo ></v-text-field> 你可以这样做： <v-text-field label="Text field" solo class="rounded-lg" ></v-text-field> 您可以添加这些类来控制边框半径： 圆形-sm 圆形 圆形-lg 圆形-XL 四舍五入-0 我经常使用“rounded-0”来删除像v-text-field这样的组件中讨厌的边框半径。 完整文档在这里。

Prop 意外突变

我将 apiStepNumber 属性从父组件传递到子组件，并在子组件中将其用作 v-model 值 注意：代码片段不起作用。请避免跑步...

Vuetify 2->3 替换已删除的 v-list-item-content / v-list-item-group

我正在尝试从 Vuetify/Vue 2->3 升级。我不是前端开发人员，只是负责升级一些遗留代码以保持功能正常运行。不幸的是，迁移指南似乎...

Vuetify 主题设置在 Storybook 中不起作用

（Vue 版本 - 2、Vuetify 和 Storybook - 最新） 考虑以下简单的按钮组件： （Vue 版本 - 2、Vuetify 和 Storybook - 最新） 考虑以下简单的按钮组件： <template> <v-btn round color="primary"> <slot></slot> </v-btn> </template> <script> export default { name: "test-button", } </script> 在App组件文件中，调用方式如下： <v-app> <v-layout column justify-center> <v-layout row justify-center align-center> <test-button @click="testBtnClicked"> Click It </test-button> </v-layout> </v-layout> </v-app> Vuetify 设置在 main.js 中如下所示： import Vue from 'vue'; import 'vuetify/dist/vuetify.min.css'; import Vuetify from "vuetify"; import colors from 'vuetify/es5/util/colors'; Vue.use(Vuetify, { theme: { primary: colors.indigo.base, info: colors.blue.lighten2, accent: colors.green.lighten1, error: colors.red.darken2 } }); 到目前为止，一切顺利 - 我在框架中间看到了一个漂亮的靛蓝色按钮，这正是我所期望的。 现在，在 Storybook 配置中，我使用与 main.js 中相同的行来设置 Vuetify，我的 Storybook 文件如下所示： import { storiesOf } from "@storybook/vue"; import TestButton from "./TestButton.vue"; storiesOf("TestButton", module) .add("button template", () => ({ template: '<test-button :rounded="true">round</test-button>', components: {TestButton} })) 这会在 Storybook 中呈现按钮，但主题设置不会发生，即：按钮不是靛蓝色，而是白色。 Vuetify 的其余属性似乎都很好 - 它看起来像一个带有白色文本的 Vuetify 圆形按钮。 我不确定这是 Vuetify 问题、Vue 问题还是 Storybook 问题（或者我的用户错误问题）。如果有人这样做过，我会很感激一些见解。 这是我的 webpack.config.js （在 .storybook 中）： module.exports = (baseConfig, env, defaultConfig) => { defaultConfig.plugins.push(new VueLoaderPlugin()); return defaultConfig; }; 我也有这个问题 读完vuetify的代码后，似乎CSS的生成，以及主题的注入都是在位于此处的VApp mixin app-theme中进行的。 所以，我认为问题与故事书无关，而是与 vuetify 有关。 通过用 v-app 包装我想要测试的组件，就可以了。 所以，现在，请尝试在 config.js 中添加一个装饰器，如下所示： import { configure, addDecorator } from '@storybook/vue'; import 'vuetify/dist/vuetify.css'; import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify, { theme: { // your colors }, }); addDecorator(() => ({ template: '<v-app><story/></v-app>', })); ... 听起来不错吗？ （也在 github 上回答：https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778） 我几个月前遇到了这个问题，所以它在我的脑海中并不是最新鲜的。您需要导入将 Vuetify 添加到 Vue 的插件。这是我的 config.js 文件夹中的 .storybook 文件。 // #### /.storybook/config.js import { configure } from '@storybook/vue'; import Vue from 'vue'; import Vuex from 'vuex'; // Vue plugins import '@/plugins/allPlugins'; // Install Vue plugins. Vue.use(Vuex); const req = require.context('../src', true, /\.stories\.js$/) function loadStories() { req.keys().forEach((filename) => req(filename)) } configure(loadStories, module); 插件/所有插件 import Vue from 'vue'; // <---- important import './vuetify'; // <---- important import WebCam from 'vue-web-cam'; import Chat from '@/libs/vue-beautiful-chat/index'; import './styles'; import './ellipsis'; import 'viewerjs/dist/viewer.css'; import Viewer from 'v-viewer'; Vue.use(WebCam); Vue.use(Chat); Vue.use(Viewer); 插件/vuetify import Vue from 'vue'; import { Vuetify, VApp, ... } from 'vuetify'; import colors from 'vuetify/es5/util/colors'; Vue.use(Vuetify, { components: { VApp, ... }, theme: { primary: colors.blue.lighten1, ... }, }); 我分离出所有插件的原因是因为自定义样式和其他插件在导入时我可以更好地控制。如果您需要自定义样式，则需要导入 Vuetify 插件和自定义样式。 我正在使用 Vuetify 3，如何在 StoryBook 中启用主题默认值 export default createVuetify({ theme: { defaultTheme: 'light', themes: { light, dark, }, }, blueprint: md3, defaults: { VCheckbox: { color: 'primary', }, VTextField: { density: 'default', hideDetails: 'auto', }, VTextarea: { density: 'default', hideDetails: 'auto', rows: 1, rowHeight: 10, // autoGrow, }, VAutocomplete: { density: 'default', hideDetails: 'auto', }, VSelect: { density: 'default', hideDetails: 'auto', }, }, components: { ...labs, // vuetify beta components ...components, }, directives, })

Vue.js Prop 的意外突变

我将 apiStepNumber 属性从父组件传递到子组件，并在子组件中将其用作 v-model 值 注意：代码片段不起作用。请避免跑步...

如何设置v-data-table组顺序？

默认情况下，group-by 属性发起的组是按字母顺序排序的，但我只是希望它保持原始顺序或手动设置。如何配置v-data-table组顺序？ &...

如何通过将项目包装在 div 中来对齐项目，同时保持最右列的对齐？

我正在使用 Vue.js，它是 Vue.js 的 UI 组件框架。目前，我遇到一个问题，无法对齐 500 或 5000 等数字，也无法对齐图标。最右边的数字

如何从扩展面板（Vuetify）中删除阴影？

我想从 Vuetify 扩展面板中删除阴影。目前，它看起来像这样： 我的代码如下所示： ...

如何从 v-select 访问对象？

这是我的规则。值数组看起来像 “价值观”：[ { "value_display": "碎云", “值”：“803” }, { ”

Vuetify v-select 组件宽度改变

我的 v-select 组件应该具有固定宽度（60px），它们适合表格单元格，我想防止它们在选择值后更改宽度。 他们改变宽度和下拉箭头......

从 vuetify 按钮中删除覆盖

我有一个在组件内部使用的 v-btn。问题是我需要从按钮上删除覆盖层。就API而言，我能找到的最接近的是ripple，这不是......

Vuetify 2 x Vue.js 2 - 无法显示在文本字段中输入的预期值

我有一个包含自动单词的文本字段。这意味着在文本字段中输入的任何字母或字符都将自动替换。 正如在文本字段中看到的，您无法自由输入任何内容...