以下代码可以直接拿去用!按自己的情况改一下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
},