【CSS】uniapp中实现动态button group（一组按钮两边圆角中间直角）

以下代码可以直接拿去用！按自己的情况改一下data就好啦，样式也可以根据自己的添加，我提供的样式基本上没有什么多余的样式

效果如下：

<view class="button-group">
	<view v-for="(button, index) in buttons" :key="index" class="button-item"
		:class="{ 'active': selectedSaleAnalysis === button.label }" @click="handleButtonClick(button)">
		{{ button.label }}
	view>
view>

data中的数据如下：

buttons: [{
	label: '今年',
	getUrl: 'getTerminalYearSaleInfo',
	xlength: 12
},
{
	label: '近 30 天',
	getUrl: 'getTerminalMonthSaleInfo',
	xlength: 30
},
{
	label: '近 7 天',
	getUrl: 'getTerminalWeekSaleInfo',
	xlength: 7
},
{
	label: '昨日',
	getUrl: 'getTerminalDaySaleInfo',
	xlength: 24
},
],

css 样式如下：(选择器是核心代码)

.button-group {
 	display: flex;
	margin: 20rpx 30rpx;
}

.button-item {
	flex: 1;
	text-align: center;
	padding: 10px;
	border: 1px solid #ccc;
	border-left: none;
	cursor: pointer;
}

.button-group .button-item:first-child {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-left: 1px solid #ccc;
}

.button-group .button-item:last-child {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.button-group .button-item:not(:first-child):not(:last-child) {
	border-radius: 0px;
}

.active {
	background-color: #007aff;
	color: #fff;
	border: none;
	border-top: 1px solid #007aff;
	border-bottom: 1px solid #007aff;
}

methods 方法：

handleButtonClick(button) {
	this.selectedSaleAnalysis = button.label; //切换选中的button
},