Vuetify 文本字段标签对齐

Posted 2023-02-16

【中文标题】Vuetify 文本字段标签对齐

【英文标题】：Vuetify Text Field Label Alignment

【发布时间】：2020-01-27 08:26:42

【问题描述】：

我正在为网络应用构建一个简单的注册页面。我正在使用 vuetify 组件来构建页面。我有两个用于获取用户名和密码的文本字段。文本字段的标签显示在文本字段的右侧。知道如何让标签出现在文本字段的左侧

我尝试添加自定义 css 此类类来覆盖对齐，但我无法获得预期的结果。这是没有自定义类的 html：

<template>
  <v-container>
    <v-card>
      <v-toolbar flat dense class="black" dark>
        <v-toolbar-title>Register</v-toolbar-title>
      </v-toolbar>
      <v-card-text>
        <v-text-field
          type="email"
          name="email"
          label="email"
          class="left-align"
          v-model="email"/>
        <v-text-field
          type="password"
          name="password"
          label="password"
          class="left-align"
          v-model="password"/>
        <br>
        <div class="error" v-html="error"/>
      </v-card-text>
      <v-card-actions>
          <v-btn class = "black" v-on:click="register" >Register</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

【参考方案1】：

在以前使用 Vuetify 1 的应用程序中切换到 Vuetify 2 时，请确保 Vuetify 已正确安装在您的应用程序中。在您的项目中添加以下文件：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = 

export default new Vuetify(opts)

在 main.js 文件中，将 vuetify 对象传递给您的 Vue 应用程序：

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue(
  vuetify,
).$mount('#app')

查看Vuetify 快速入门文档了解更多信息

【参考方案2】：

尝试使用reverse 道具

<v-text-field
reverse
type="email"
name="email"
label="email"
class="left-align"
v-model="email"/>

【讨论】：

我试过使用 reverse 道具，但它不影响样式，标签仍然出现在右边。