el-radio-button自适应充满盒子的写法

前端程序媛Ying

已于 2024-01-03 09:29:17 修改

阅读量730

点赞数 7

分类专栏： vue web前端文章标签： vue.js 前端

于 2024-01-02 19:53:55 首次发布

本文链接：https://blog.csdn.net/m0_62323730/article/details/135348442

版权

web前端同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

vue

35 篇文章 1 订阅

订阅专栏

业务场景：当盒子较宽时，希望 el-radio-button 自适应充满盒子。

el-radio-button 自适应充满盒子的写法

<el-form :inline="true" :model="searchForm">
        <el-form-item style="display: flex; align-items: center;">
          <el-radio-group style="flex-wrap: nowrap;" v-model="searchForm.stateType" size="default" >
            <el-radio-button label="1" class="first">当前</el-radio-button>
            <el-radio-button label="2" class="end">逾期</el-radio-button>
          </el-radio-group>
        <el-form-item>
</el-form>

:deep(.el-radio-group) {
  display: flex;
  width: 100%;
  text-align: center;
}
:deep(.el-radio-button) {
  flex: 1;
  background-color: #032E74;
}
:deep(.el-radio-button.is-active) {
  background-color: var(--el-color-primary);
}

:deep(.el-radio-button:first-child) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
:deep(.el-radio-button:last-child) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

:deep(.el-radio-button__inner) {
  transition: none; // button宽度变宽后，过度效果明显看起有有点卡，这里去掉过渡效果
}