业务场景:当盒子较宽时,希望 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宽度变宽后,过度效果明显看起有有点卡,这里去掉过渡效果
}