记录一个小按钮，yuan'she原生的写法

.right {
        width: 250rpx;
background-color: #F5F5F5;
border-radius: 38rpx;
display: flex;
align-items: center;
font-size: 28rpx;
padding: 0 38rpx;
color: #919293;

	.dinein,
	.takeout {
		position: relative;
		display: flex;
		align-items: center;
		&.active {
			padding: 14rpx 38rpx;
			color: #ffffff;
			background-color: #FFCC00;
			//background-color: #5A5B5C;
			border-radius: 38rpx;
			}
		}

				.takeout {
					margin-left: 20rpx;
					height: 100%;
					flex: 1;
					padding: 14rpx 0;
				}

				.dinein.active {
					margin-left: -38rpx;
				}

				.takeout.active {
					margin-right: -38rpx;
				}
			}

html

<view class="right">
	<view class="dinein" :class="{active: orderType == 'takein'}" @tap="takein()">
<text>自取</text>
</view>
<view class="takeout" :class="{active: orderType == 'takeout'}" @tap="takout()">
<text>外卖</text>
</view>
</view>

     const orderType=ref()

const takout = (force = false) => {
	if (orderType.value == 'takeout' && force == false) return
  orderType.value = 'takeout';
}

const takein = (force = false) => {
	if (orderType.value == 'takein' && force == false) return
  orderType.value = 'takein';
}