shunfengche-sfd/my/jgOrder/BtnGroup.vue

<template>
	<view class="btn-group">
		<button class="btn" :class="currentVal === item.value ? 'active' : ''" v-for="item in options" :key="item.value" @click="handleClick(item.value)">{{ item.label }}</button>
	</view>
</template>

<script>
	export default {
		name: 'BtnGroup',
		props: {
			value: {
				type: Number,
				default: 1,
			},
			defaultVal: {
				type: Number,
				default: 1,
			},
			options: {
				type: Array,
				default: () =>  [
					{ label: '日', value: 1 },
					{ label: '周', value: 2 },
					{ label: '月', value: 3 },
				]
			},
		},
		data() {
			return {
				currentVal: 1,
			}
		},
		watch: {
			defaultVal: {
				handler(newVal) {
					this.currentVal = newVal
				},
				immediate: true
			}
		},
		methods: {
			handleClick(val) {
				this.currentVal = val
				this.$emit('input', val)
			},
		},
	}
</script>

<style lang="scss">
	.btn-group {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 999999;
		display: flex;
	}
	 
	.btn {
	  padding: 8rpx 16rpx;
	  gap: 0rpx 16rpx;
	  font-size: 24rpx;
	  line-height: 32rpx;
	  background-color: #F5F5F5;
	  color: #333333;
	  margin-left: 16rpx;
	}
	.btn.active {
		background-color: #00C18A;
		color: white;
	}
</style>