el-button-group中只有一个button情况下的美化

 0 0条评论

项目中需要使用到el-button-group组件,通常情况下会如下显示。


还是比较美观的。

但是项目中,需要根据实际情况判断显示的按钮数,有些情况下只有一个按钮,如下图,就会非常丑陋,两边少了边框。


由于el-button-group是父组件,所以没有办法通过v-if来判断(实际上也是可以的,就是把组件内的button数组复制两边,那么代码非常不优雅)。

最后我想到可以以使用css的only选择器来实现,即当el-button-group内部只有一个button的时候,添加上两边的边框即可。

.childButton:only-of-type{
   border-left-color: var(--el-color-info-light-5);
   border-right-color: var(--el-color-info-light-5);
}

以上的配色需要根据自己实际选择的主题色来替换哦,最后要把group内的button都添加一下.childButton的class类名即可。

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客