el-radio文字后面两种样式

原创已于 2023-07-12 16:12:53 修改 · 804 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html

于 2023-06-25 13:58:24 首次发布

前端专栏收录该内容

74 篇文章

订阅专栏

文章介绍了在Vue.js中如何通过修改<el-radio>组件的样式来实现不同效果。原始的<el-radio>标签无法直接设置个性化样式，但通过使用<el-radio-group>和添加额外的CSS类，可以定制如年化利率和直接提款等备选项的显示样式。

需要的样式:

原生样式与代码

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

这种写法无法出现两种不一样的样式效果，因此写为如下代码就可以修改设置样式了。

  <el-radio-group fill="#008296">
            <el-radio :value="1">
              <span class="number">年化利率18%</span>
              <span class="enight-label">直接提款</span>
            </el-radio>
          </el-radio-group>