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) 。 這將確保不會因標簽的長度而產生差異。