Vue3实现一个ButtonGroup组件

编写一个ButtonGroup组件要求支持 单选、多选

<template>
<div style="text-align: center">
  <div>
    <p>选择butonGroup的单选/多选类型：</p>
    <label>单选<input type="radio" v-model="gender" value="single" @click="clickSingleMulti"/></label>
    <label>多选<input type="radio" v-model="gender" value="multi" @click="clickSingleMulti" /></label>
    <p>已选类型：{{gender === 'single' ? '单选' : gender === 'multi' ? '多选' : ''}}</p>
  </div>
  <hr>
  <div v-for="item, index in button_items">
    <button @click="clickFun(item, $event)" :selected='item.select' :disabled="gender === ''">
      {{item.title}}
    </button>
  </div>
</div>

</template>
<script setup lang="ts">
import { reactive, ref } from ‘vue’
interface ButtonItemsInterface {
  id: number
  title: string
  select: boolean
}
let button_items: ButtonItemsInterface[] = reactive([
  {
    id: 1,
    title: ‘选项1’,
    select: false
  },
  {
    id: 2,
    title: ‘选项2’,
    select: false
  },
  {
    id: 3,
    title: ‘选项3’,
    select: false
  },
])
let result: any[] = reactive([])
let gender = ref(‘’)
// 置空函数，当切换单选多选，置空result数组
const clickSingleMulti = () => {
  result = []
}
const clickFun = (item: any, e: any) => {
  if (gender.value === ‘multi’) {
    if (e.target.getAttribute(‘selected’) === ‘true’) {
        // 被选中
        let index = result.indexOf(item.id)
        if (index > -1) {
            result.splice(index,1);
        }
    } else {
        // 未被选中
        result.push(item.id)
    }
    item.select = !item.select
    console.log(‘单选选择的结果：’, result)
  } else {
    result = []
    result.push(item.id)
    console.log(‘多选选择的结果：’, result)
  }
}
</script>
<style scoped>
button[selected=true] {
    color: red;
}
</style>