Vuetify 如何根据需要标记字段

Question

当我们尝试在互联网上填写表格时，必填字段会使用红色“*”标记来标记，以表明该字段是必填字段。

有没有办法在 vuetify.js 中指示用户必填字段？

Answer 1

这有点痛苦，但是有一个名为插槽的“标签”，你可以这样做：

<v-text-field
    v-model="loginInfo.email"
    autofocus
    name="email"
    type="email">
  <template #label>
    <span class="red--text"><strong>* </strong></span>Email
  </template>
</v-text-field>

Answer 2

来自 v1.1.0 文档：

required 属性不再显式向标签添加星号。 v1.0 中删除了所有验证功能。

所以显然没有什么可以再根据需要设置它了，我们必须在标签中手动添加它：

label="Name*"

---

或者你可以使用CSS：

.required label::after {
    content: "*";
}

您必须手动添加

required

类（当然类的名称是任意的）。

Answer 3

您可以将规则道具传递给

v-text-field

。

例如，

<v-text-field
  v-model="title"
  :rules="['Required']"
  label="Title"
  counter
  maxlength="20"
></v-text-field>

请参阅此 Vuetify 示例以获取更完整的图片：https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/text-fields/validation.vue

required

也是一个 HTML 属性。您可以将其添加到 HTML 元素，如下所示：

<v-text-field
  v-model="title"
  label="Title"
  counter
  maxlength="20"
  required
></v-text-field>

Answer 4

我有解决方案，将此 css 类添加到主 css 文件或 main.js 中。

div[aria-required=true].v-input .v-label::after {
  content: " *";
  color: red;
}

就是这样，在此添加必填字段：

<v-text-field required>

Answer 5

性能方面，我不知道这是否是最好的解决方案。但它有效。

将下面的 JavaScript 文件导入到您的应用程序引导程序（或类似的东西）中。

import Vue from 'vue';

Vue.mixin({
    mounted() {
        const e = this.$el;

        if ('querySelector' in this.$el) {
            const i = this.$el.querySelector('input[required]');

            if (i !== null) {
                const l = i.previousSibling;

                if (l.querySelector('.required.sign') === null) {
                    const r = document.createElement('span');

                    // l.classList.add('required');
                    r.classList.add('required', 'sign');

                    r.appendChild(document.createTextNode('*'));
                    l.appendChild(r);
                }
            }
        }
    },
});

Nuxt.js：将上面的文件放入

plugins

文件夹中。将其路径包含在

plugins

文件的

nuxt.config.js

数组中。

将以下规则添加到您的全局 CSS/主题中。

.v-label  > .required.sign {
    color: darkred;
    font-weight: bold;
    margin-left: .25em;
}

Answer 6

在 Vuetify 3 中，我这样做了：

.v-field:has(input[required]) .v-label {
    padding-inline-end: 8px;
}
.v-field:has(input[required]) .v-label::after {
    position: absolute;
    content: "*";
    color: red;
    top: 0;
    inset-inline-end: 0; // to support also RTL direction
}