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

问题描述

我在表单上使用 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>

解决方法

如果给定，el-radio 的默认插槽用作显示的标签（而 label 属性将用作值），因此您可以将带有标记的标签放入其中，包括关于文本跨度的类：

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

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

demo