繁体   English   中英

Vuetify 右侧的 v-text-field 标签

Vuetify v-text-field label on right

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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>

结果:

在此处输入图片说明

在此处输入图片说明

2 个回复

我遇到过同样的问题。 在将我的代码与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 经验的人可以提供更好的配置。

我正在使用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) 这将确保不会因标签的长度而产生差异。

1 Vuetify 密码与 v-text-field 标签重叠

我正在使用 Vuetify 和 Firebase 制作日志组件。 我希望隐藏密码,但是通过将类型 'pasword' 添加到v-text-field ,它添加了 4 个点与密码字段的标签重叠,而单词 'admin' 与电子邮件字段重叠: 当我点击任何字段时,我可以在 $data pre 中看到 ...

3 vuetify中的“透明”v-text-field?

我需要创建没有背景、边框或阴影的v-text-field ,这可能吗? 文档仅指定以下类型: 但它们都不适合我的需求。 实现这一目标的最简单方法是什么? 我试过这个,但它没有删除背景(在黑暗模式下)。 ...

4 vuefity 翻译 v-text-field 标签

我需要翻译 vuetify 文本字段( v-text-field )的标签(和占位符)。 代码看起来像这样 在第一种情况下(也尝试使用自动完成),标签正好是( $t('common.nameLabel')作为字符串)。 所以它似乎不能作为函数处理。 是否可以通过这种方式翻译所有标签? ...

5 v-text-field 中的中心标签

你好,我尝试了不同的解决方案来将标签居中放置在我的 v-text-field 中,不幸的是它们都不起作用。 请找到以下代码: html代码 &lt;v-text-field dark class="centered-input" label="your code"&gt;&lt;/v-text- ...

7 vue / vuetify动态修改v-text-field属性

我有几个领域: 在Vuetify的文档中,我看到有两个名为error属性,它们会触发错误状态以及显示error-messages 。 提交表单后,如果要在任何字段上出现任何错误,我都想触发这些属性。 我怎样才能做到这一点? 例如,如何使用error属性将名称为“ code”的字段手动设置为错 ...

9 Vuetify组件v-text-field没有得到类

我试图在vuetify中将类添加到v-text-field中,但是当它渲染到dom时,我意识到输入中没有该类。 我懂了: &lt;div class="v-input upper v-input--is-label-active v-input--is-dirty theme--lig ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM