Vuetify 右侧的 v-text-field 标签

Question

v-input-text 的标签在右边。 我想把它放在左边而不使用 css，这实际上应该是默认的。 从文档中我可以看到左侧是默认的。 我已经尝试了 Vuetify 文档的几个示例，所有这些示例都给了我相同的结果。

代码是从文档中复制/粘贴的。 在我看来，如此简单的事情不应该成为问题。 我已经为此挣扎了一段时间。 我已经尝试在不同的浏览器中运行几个示例：Opera、Microsoft Edge、Firefox。

这是您可以在此处找到的代码：

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="message"
            outlined
            clearable
            label="Message"
            type="text"
          >
            <template v-slot:prepend>
              <v-tooltip
                bottom
              >
                <template v-slot:activator="{ on }">
                  <v-icon v-on="on">
                    mdi-help-circle-outline
                  </v-icon>
                </template>
                I'm a tooltip
              </v-tooltip>
            </template>
            <template v-slot:append>
              <v-fade-transition leave-absolute>
                <v-progress-circular
                  v-if="loading"
                  size="24"
                  color="info"
                  indeterminate
                ></v-progress-circular>
                <img
                  v-else
                  width="24"
                  height="24"
                  src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
                  alt=""
                >
              </v-fade-transition>
            </template>
            <template v-slot:append-outer>
              <v-menu
                style="top: -12px"
                offset-y
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    v-bind="attrs"
                    v-on="on"
                  >
                    <v-icon left>
                      mdi-menu
                    </v-icon>
                    Menu
                  </v-btn>
                </template>
                <v-card>
                  <v-card-text class="pa-6">
                    <v-btn
                      large
                      flat
                      color="primary"
                      @click="clickMe"
                    >
                      <v-icon left>
                        mdi-target
                      </v-icon>Click me
                    </v-btn>
                  </v-card-text>
                </v-card>
              </v-menu>
            </template>
          </v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

结果：

Answer 1

我遇到过同样的问题。 在将我的代码与https://codepen.io/pen/?&editors=101上的代码笔示例进行比较时，我注意到它们构造 vuetify 对象略有不同。

我有：

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

const opts = {}
export default new Vuetify(opts)

document.addEventListener('DOMContentLoaded', () => {
    Vue.use(Vuetify);

    login_vue = new Vue({
        el: '#login-vue',
       
        data: {
            message: "Hello World",
        },
        computed: {},
        methods: {}
    });
});

他们的Vue代码：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

这让我认为他们的代码需要一个名为“vuetify”的变量。 再次检查安装指南后。 https://vuetifyjs.com/en/getting-started/installation/#webpack-install 。 我看到他们有两种加载 vuetify 的方法，具体取决于您是从加载器还是从 javascript 加载。 我在 javascript 中使用 Loader 示例。

一旦我更改了代码以创建变量，他们就希望一切都按预期工作。

最终代码：

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

const opts = {}
export default new Vuetify(opts)

document.addEventListener('DOMContentLoaded', () => {
    Vue.use(Vuetify);
    vuetify: new Vuetify(),
    login_vue = new Vue({
        el: '#login-vue',
        data: {
            message: "Hello World",
        },
        computed: {},
        methods: {}
    });

});

我需要 Vue.use(Vuetify); 这似乎很奇怪。 和 vuetify: new Vuetify() 这个解决方案是有效的，但也许有更多 VUE 经验的人可以提供更好的配置。

Answer 2

我正在使用Vue2。 问题似乎在于我的应用程序是在v-app DOM 之外制作的。 为了让一切正常运行，它应该是 . 因此，问题。 一旦我把所有东西都放在 v-app 中，事情就开始像他们应该的那样工作了。 但是，重构代码可能需要数天时间，具体取决于大小和复杂性。

CSS 解决方法

我找到了一个 CSS 解决方法来解决这个问题。 我在 App.vue 中添加了以下样式，似乎解决了这个问题：

.v-input .v-label--active{
  transform: translateX(-12%) translateX(-7.5px) translateY(-28px) scale(0.75) !important;

}

.v-input--dense .v-label--active{
  transform: translateX(-12%) translateX(-7.5px) translateY(-21px) scale(0.75) !important;

}

---

我的问题

对我来说，活动标签稍微向右移动并稍微向底部移动：

建议

由于您的问题更极端，请尝试使 translateX 中的值更负。

警告

请记住 - 在执行此操作时保持 translateX 值的比率不变(12:7.5) 。 这将确保不会因标签的长度而产生差异。