Vuetify 如何根据需要标记字段答案

【问题标题】：Vuetify how to mark field as requiredVuetify 如何根据需要标记字段
【发布时间】：2019-02-09 00:56:43
【问题描述】：

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

这样有没有办法向用户指示 vuetify.js 中的必填字段？

【问题讨论】：

在我的例子中，我使用“提示”和“规则”来为 v-text-field 和 v-textarea 实现这一点。

【解决方案1】：

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

<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>

【讨论】：

这个解决方案是 100% 的 Vue/Vuetify，并且不依赖样式或 CSS，这可能会出现问题或被覆盖。如果你这样设置，它就会一直存在。

【解决方案2】：

来自v1.1.0 docs：

所需的道具不再显式地向标签添加星号。在 v1.0 中，它的所有验证功能都被删除了。

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

label="Name*"

或者你可以使用 CSS：

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

您必须手动添加required 类（当然，类的名称是任意的）。

【讨论】：

我需要将css添加到App.vue

【解决方案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>

【讨论】：

不，我的意思是在文本字段中显示一个红色的 * 标记。
您的代码笔似乎没有保存。但是将所需的属性传递给文本字段给了我 * 标记。 =)
required prop 用于在v.1.1.0 之前将其标记为必需。据我所知，rules prop 从未标记过它。有关此问题的更新，请参阅我的答案。

【解决方案4】：

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

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

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

<v-text-field required>

【讨论】：

【解决方案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 文件夹。在nuxt.config.js 文件中的plugins 数组中包含其路径。

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

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

【讨论】：