时间戳

首页 > 解决方案 > Vuetify 大纲标签在最新更新后看起来很奇怪

vue.js - Vuetify 大纲标签在最新更新后看起来很奇怪

问题描述

我目前使用的是 2.5，我所有的概述字段现在的标签都离顶部太近了： 在此处输入图像描述

显然，原因是下面的代码：

.v-text-field--outlined .v-label--active {
transform: translateY(-24px) scale(.75);}

如果我使用 chrome 工具禁用它，那么将使用以下 CSS，这使得标签看起来不错：

.v-text-field .v-label--active {
    max-width: 133%;
    transform: translateY(-18px) scale(.75);
    pointer-events: auto;
}

在此处输入图像描述

我只是想了解我是否应该指定任何特殊属性：

 <v-col cols="12" sm="8" class="text-center">
     <ValidationProvider vid="company_cif" name=" " rules="required|max:20" v-slot="{ errors, valid }">
        <v-text-field v-model="current.company.tin" maxlength="20" :label="$t('company.tin')" outlined append-icon="mdi-passport" persistent-hint :error-messages="errors" :readonly="!rights" @change="passes(updateCompanyCheck)"></v-text-field>
     </ValidationProvider>
 </v-col>

标签： vue.jsvuetify.js

解决方案

推荐阅读