vuetify.js 相关问题

Vuetify.js是Vue.js的语义材料组件框架2.将此标记用于特定于vuetify组件和api的问题。（如果可能，提供CodePen或JsFiddle重现您的问题）

Ipyvuetify 和 matplotlib.pyplot 显示顺序

我试图显示一组 ipyvuetify 选择小部件，这些小部件会触发函数并绘制图形。虽然我能够使其按预期工作，但我似乎无法将 pyplot 图放置在...

jupyter-notebook vuetify.js ipywidgets

回答 2 投票 0

vuetify数据表的列宽如何固定

我有一个 vuetify 数据表，我已经为每一列设置了宽度，我想固定表的列宽度，但它已经因为它们的内容而变大了，t 的宽度是多少并不重要。 ..

javascript html css vue.js vuetify.js

回答 1 投票 0

vuetify 3 中不显示对话框

我正在尝试将 vuetify 3.alpha 与 vue 3 一起使用。这些是我的文件： Temp.vue（取自 vuetify 示例）我正在尝试将 vuetify 3.alpha 与 vue 3 一起使用。这些是我的文件： Temp.vue（取自 vuetify example） <template> <div class="text-center"> <v-dialog v-model="dialog" width="500" > <template v-slot:activator="{ on, attrs }"> <v-btn color="red lighten-2" dark v-bind="attrs" v-on="on" > Click Me </v-btn> </template> <v-card> <v-card-title class="text-h5 grey lighten-2"> Privacy Policy </v-card-title> <v-card-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </v-card-text> <v-divider></v-divider> <v-card-actions> <v-spacer></v-spacer> <v-btn color="primary" text @click="dialog = false" > I accept </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </template> <script> export default { data () { return { dialog: false, } }, } </script> 应用程序.vue <template> <v-app> <v-main> <Temp/> </v-main> </v-app> </template> <script lang="ts"> import { defineAsyncComponent, defineComponent, reactive, ref, Ref, watch, createApp, onMounted} from 'vue' import Temp from './Temp.vue' export default defineComponent({ name: 'App', components: { Temp }, setup () { }, data () { return { } }, }) </script> 这就是我得到的：问题是当我单击此按钮时，不会显示对话框。这是我的错误还是 alpha 版本的错误？即使是官方 vuetify 文档中使用激活器插槽的示例也无法正常工作。您只需将 @click.stop="dialog = true" 添加到打开对话框的按钮并从中删除 v-on="on"。根据官方源代码你可以这样做： <template v-slot:activator="{isActive,props}"> <v-btn color="red lighten-2" dark @click="props.onClick[0]" > Click Me </v-btn> </template> 演示如果我使用 v-slot:activator="{ on, attrs }" 对我不起作用。所以我的解决方案是分离元素： <v-btn color="primary" dark class="mb-2" @Click="dialog=true"> New item </v-btn> <v-dialog v-model="dialog" max-width="500px"> <v-card> <v-card-title> <span class="text-h5">Dialog new item</span> </v-card-title> <v-card-text></v-card-text> </v-card> </v-dialog>

typescript vue.js vuetify.js vuejs3 vuetifyjs3

回答 3 投票 0

如何使用 Vue 3 和 Nuxt 根据加载的当前页面将计算图像 SRC 属性更改为另一属性？

我试图解决这个与 UI 动态变化相关的问题，首先尝试使用原生 vanilla JS，但进一步适应 Nuxt 3 和 Vue。不过，我在功能上遇到了问题

vue.js vuejs3 nuxt.js vuetify.js nuxtjs3

回答 1 投票 0

为什么会出现“不允许不规则空格”的错误以及如何解决？

我有标记两个标记，如下代码所示，然后我运行后得到“错误不规则空白不允许无不规则空白”。我该如何修复？ <... 我有 <p> 标记两个标签，如下代码所示，然后我运行后得到 "error Irregular whitespace not allowed no-irregular-whitespace"。我该如何修复？ <div> <p>Ankjjdhd asas a sds qwe vsdf fsf ewth lioy nfhfgh</p> <p>sdfsdf ytjyj rtyrty ddgf gsdfgsf in asdsadbfd</p> </div> 这是一个 Eslint 错误，可以通过在 Eslint 插件配置文件中添加 "extends": "eslint:recommended" 行来修复。这里是Eslint官方网页错误页面的链接。

vue.js vuejs2 vue-component vuex vuetify.js

回答 1 投票 0

VueJS CSS 动画未扩展到 v-card/v-col 之外

我目前正在尝试建立一个图书收藏，并尝试制作带有圆形展开动画的通知图标。我正在将 Vue 3 与 Vuetify 结合使用，并且网格中有多张卡片，其中包含 rows/...

css vue.js animation vuetify.js

回答 1 投票 0

消息的含义：WeakMap 键必须是对象

我在一个项目中使用 Vuetify。在本地主机上，一切正常。当我运行 pnpm build 并将 dist 上传到服务器时，出现以下错误：类型错误：WeakMap 键必须是对象...

javascript vuetify.js

回答 1 投票 0

如何更改vuetify 3字体？

Vuetify 3 似乎默认使用 Roboto 字体。我想将字体更改为 Poppins，但没有关于如何执行此操作的明确文档。我尝试通过 ch 更改 app.vue 样式中的字体系列...

vue.js vuetify.js

回答 1 投票 0

Vuetify - 清除 v 文本字段时如何触发方法

有没有办法在使用 Vuetify 清除文本字段时调用方法？有没有办法在使用 Vuetify 清除文本字段时调用方法？ <v-text-field class="mt-2 mb-0" clearable solo v-model="searchQuery" append-icon="search" @click:append-outer="searchCos" label="Nom de compagnies ou mots-clés"> </v-text-field> onClear() { doSomethingHere() } 您可以使用 @click:clear="()"，这样您就可以在调用该函数的同时清除文本。这是例子 https://codepen.io/anon/pen/ePmLOg?editors=1010 使用 clear-icon-cb 道具。这允许您在单击清除图标时使用自定义回调函数。 <v-text-field clearable :clear-icon-cb="onClearClicked"> </v-text-field> onClearClicked () { // do something } 您可以使用 clearableCallback <v-text-field ref="inputRef" class="mt-2 mb-0" clearable ..... > </v-text-field> <v-btn text @click="clearInput">clear</v-btn> <script> export default { ...... methods:{ ..... clearInput() { this.$refs.inputRef.clearableCallback() } } } 调用输入字段的 reset 函数，例如： <v-text-field ref="inputRef"></v-text-field> <v-btn @click="clearInput">clear</v-btn> <script> export default { methods:{ clearInput() { this.$refs.inputRef.reset() } } } 如果您希望清除按钮将模型值更新为特定值，您也可以覆盖清除图标： <v-text-field v-model="myValue" append-icon="mdi-close" @clear:append="myValue = 1"> </v-text-field> 对于我的情况，@click:clear 不运行。要在文本输入和清除时运行操作，我使用 @input : <v-text-field v-model="search" @input="sendSearch" clearable hide-details></v-text-field> 在我的方法中： methods: { sendSearch(){ this.$emit("send-search",this.search); } }

vue.js vuetify.js nuxt.js

回答 6 投票 0

Vuetify 如何根据需要标记字段

当我们尝试在互联网上填写表格时，必填字段会使用红色“*”标记来标记，以表明该字段是必填字段。就像这样，有没有一种方法可以指示用户所需的字段...

vuejs2 vuetify.js

回答 6 投票 0

无法删除 Vuetify 扩展面板上的填充

我有一个文本输入字段，单击按钮即可显示。当点击“KOMMENTAR HINZUFÜGEN”时，它看起来像这样：我正在尝试去掉黑色下面的白色填充物......

css vue.js vuetify.js

回答 1 投票 0

尝试访问 vuetify 中 v-select (itemProps) 的嵌套 json 值

我正在尝试在 vuetify 中制作一个 v-select 组件，它从 API 获取数据并将其显示为选项，但奇怪的是收到的 json 数据在对象内部有一个对象，但它不能...

vue.js vuetify.js

回答 1 投票 0

如何利用v-data-table中的item-class来增加字体大小？

我对 VueJs 比较陌生，并尝试将我的 v-data-table 项目（Vuetify 2）中的字体大小更新为 20px。在这样做的过程中，我遇到了物品等级。这种方法对 chang 来说是成功的...

vue.js vuetify.js

回答 1 投票 0

如何在 Vuetify.js 中单击附加图标时调用函数？

我需要append-icon="close"来调用@click="clearSearch()" 现在我正在使用一个专用按钮来实现它：我需要 append-icon="close" 打电话给 @click="clearSearch()" 现在我正在使用专用按钮来实现它： <v-text-field v-model="search" class="search" label="search" prepend-icon="search" append-icon="close"> </v-text-field> <v-btn @click="clearSearch()"></v-btn> 我尝试添加append-icon-cb="clearSearch()"但它不起作用，我不知道为什么我也尝试过简单地使用clearable，它会清除输入，但所有元素都保持“过滤”状态。我不知道 clearable 是如何工作的，但我的 clearSearch() 方法只是这样做： clearSearch() {this.search = ""} 并且它有效，这就是为什么我使用自定义 clear input 方法使用 @click:append="clearSearch"，:append-icon-cb 已弃用。（来源）解决了，解决方法如下：为了避免这个问题，您应该使用 : 符号绑定属性： :append-icon-cb="clearSearch" 并且不要放()，否则它将无法工作（正如@Traxo提到的）我认为如果你删除 () 应该可以工作，因为包含 () 后，你立即只需调用一次函数即可。编辑：不要忘记冒号: 所以： :append-icon-cb="clearSearch" 但这发生了变化：对于附加图标，例如 append-icon="mdi-magnify-plus-outline", 你就这样做 @click:append="zoomIn"。但是对于附加外部图标，例如 append-outer-icon="mdi-plus-circle-outline"，` 您必须添加单词“append”，即 @click:append-outer="addMore" 因此，这将适用于 Vue2 <v-text-field solo append-outer-icon="mdi-plus-circle-outline" @click:append-outer="addMore" > </v-text-field> 只需将 :append-icon-cb="() => (e1 = !e1)" 更改为 @click:append="() => (e1 = !e1)" 即可完美运行并删除警告...

vue.js vuetify.js

回答 5 投票 0

如何在 vue javascript 应用程序中显示服务器目录中的所有图像

我正在尝试将主机（服务器）上的一个目录（图表）中存在的所有图像显示到 vue 页面中，而不必手动将它们全部列出在数据中，因此必须重建...

javascript vue.js vue-component vuetify.js

回答 1 投票 0

“拒绝应用 {link} 中的样式，因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中

我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中，Vuetify 工作正常，但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息： “拒绝应用...

gitlab vuetify.js mime-types

回答 1 投票 0

Vuetify 3 V-Stepper 插槽接头

在 vuetify 3 中创建 v-stepper 本质上有两种方法。您可以使用属性或模板/槽。我无法使用属性方法，因为由于某种原因，转换很混乱......