<script setup>
// 常用属性：
//    items - 选项定义：[item1, item2, ...]
//
// items中单个选项字段：
//    name - 选项文字
//    value - 选项值
//    disabled - 是否禁用//

import SelectButton from "primevue/selectbutton";
import {ref} from "vue";

const props = defineProps(["items"])
const emits = defineEmits(["change"])
const rootRef = ref(null)

const onChange = e => {
	if (typeof e.value === "string") {
		emits("change", e)
	}
}

</script>

<template>
	<SelectButton ref="rootRef" :options="items"
				  optionLabel="name"
				  optionValue="value"
				  optionDisabled="disabled"
				  @change="onChange">
	</SelectButton>
</template>

<style scoped>
:deep(.p-togglebutton-checked) {
	pointer-events: none;
}
</style>