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

Posted 2023-02-22

【中文标题】使用 vue 和元素 UI 库单选按钮的自定义标签

【英文标题】：Custom label using vue and element UI library radio buttons

【发布时间】：2021-07-27 05:01:23

【问题描述】：

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

【问题讨论】：

是什么阻止你使用label="Morning <span>(9 AM - 12 PM)</span>" ？

span 将呈现为文本而不是 span 元素

好像你需要在某处使用v-html

【参考方案1】：

如果给定，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