使用 vue 和 element UI 库单选按钮的自定义标签

Question

我在表单上使用 Element UI 单选按钮，并尝试为每个选择创建自定义标签。在每个单选按钮上都有一个道具“标签”，我可以在其中添加我的标签文本，效果很好。问题是我需要在一半的标签文本上使用不同的样式。这可能吗？

例如：label="Morning (9 AM - 12 PM)"我希望能够定位时间和风格不同于“早晨”。像 label="Morning <span>(9 AM - 12 PM)</span>"

    <el-form-item
                prop="selfBestTimeToContact"
                class="form-item--radio form-item--radio--radio-adjacent"
                :show-message="false"
              >
                <el-radio-group
                  v-model="formData.selfBestTimeToContact"
                  ref="selfBestTimeToContact"
                >
                  <ol>
                    <li class="radio-list-item">
                      <el-radio
                        id="selfBestTimeToContactMorning"
                        label="Morning (9 AM - 12 PM)"
                        name="selfBestTimeToContact"
                        class="radio--bold"
                      />
                      <p>Test</p>
                    </li>

                    <li class="radio-list-item">
                      <el-radio
                        id="selfBestTimeToContactAfternoon"
                        label="Afternoon (12 PM - 5 PM)"
                        name="selfBestTimeToContact"
                        class="radio--bold"
                      />
                    </li>

                    <li class="radio-list-item">
                      <el-radio
                        id="selfBestTimeToContactEvening"
                        label="Evening (5 PM - 8 PM)"
                        name="selfBestTimeToContact"
                        class="radio--bold radio-label"
                      />
                    </li>
                  </ol>
                </el-radio-group>
              </el-form-item>

Answer 1

如果给定，el-radio 的默认插槽将用作显示的标签（而 label 属性将用作值），因此您可以将带有标记的标签放在里面，包括 class 文本范围内的样式：

<template>
  <el-radio>Morning <span class="time">(9 AM - 12 PM)</span></el-radio>
</template>

<style>
.time {
  font-weight: bold;
}
</style>

demo

使用 vue 和 element UI 库单选按钮的自定义标签

Custom label using vue and element UI library radio buttons

javascript

css

vue.js

nuxt.js

element-ui