Question

我正在为联系表单使用可重复使用的代码，并且有两个必填字段。在父组件中，我使用label作为标签标签的名称。例如，标签全名必须具有“全名”，而“ ”应为蓝色。我不知道该怎么做。感谢有人可以帮助我。

InputField.vue

<template>
  <label for="name">
        {{ label }}
        <span style="color:#0077FF">&nbsp;*</span>
      </label>
</template>

Contact.vue

<form id="contact-form" @submit.prevent="submitForm">
  <InputField
    v-model="fullName"
    label="Full Name *"
    placeholder="Your full name"
    required
    @handleChange="handleChangeName($event)"
  />
</form>

Answer 1

在CSS中最容易做到这一点。

在您的组件中添加一个required道具（如果还没有的话），并使用它来向标签添加CSS类

props: {
  label: String,
  required: Boolean,
  placeholder: {
    type: String,
    required: false
  }
}

<label :class="{ required }">{{ label }}</label>

<style scoped>
label.required:after {
  content: ' *';
  color: #0077FF;
}
</style>

然后，您只需提供不带装饰的标签，CSS就会自动为required字段添加标签。

<InputField required label="Full Name" .../>

Vue JS中子组件的CSS样式

1 个答案: