<!-- 
    filename: SelectorBtnGroup.vue
    author: liubin
    date: 2023-12-05 14:28:24
    description: 选项按钮组
-->

<template>
	<div class="selector-btn-group">
		<button
			class="btn"
			v-for="opt in options"
			:key="opt"
			@click="active = opt"
			:class="active == opt ? 'btn-active' : ''">
			{{ opt }}
		</button>
	</div>
</template>

<script>
export default {
	name: 'SelectorBtnGroup',
	components: {},
	props: ['options'],
	data() {
		return {
			active: this.options[0] || 'default'
		};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
button {
	border: none;
	appearance: none;
	outline: none;
	color: red;
	font-size: 14px;
	padding: 8px 12px;
}

button:first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

button:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
.selector-btn-group {
}

.btn {
	background: #03233c;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease-out;

	&.btn-active, 
	&:hover {
		background: #0f3d5c;
	}
}
</style>
