Vuetify 文本字段边框丢失

问题描述

我正在尝试实现 Veutify 的

这是当文本字段处于焦点时的样子:

这些是我在 main.js 中的导入

从'vue'导入Vue；从 'vuetify' 导入 Vuetify；Vue.use(Vuetify);

我是否遗漏了导入或其他内容?

解决方案

我遇到了同样的问题，您需要将您的应用程序包装在 中.

原因是边框的颜色取决于您使用的主题.如果您尝试检查文档，您将看到边框的规则类似于 .application--light .input-group .input-group__details: application--light 是确实是 v-app 添加的类.

I'm trying to implement Veutify's text field

This is what it looks like for me right now:

And this is what it looks like when the text field is in focus:

These are my imports in main.js

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);

Am I missing an import or something?

解决方案

I ran in the same issue, you need to wrap your application in a <v-app>.

The reason is that the border's color depends on the theme you're using. If you try to inspect the documentation you will see that the border's rule is something like .application--light .input-group .input-group__details: application--light is indeed a class added by v-app.

这篇关于Vuetify 文本字段边框丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！