封装动态展示需要显示的按钮

实现基础布局
实现组件的渲染
默认选中
切换选中
改用 v-model 写法

父组件

<script setup lang="ts">
const options = [
  { label: '男', value: 1 },
  { label: '女', value: 0 }
]
//默认选中,默认选中男
const gender = ref(1)
script>

<template>
  <div class="cp-radio-btn">
     
   
     <cp-radio-btn :options="options" v-model="gender">cp-radio-btn>
  div>
template>

<style lang="scss" scoped>

style>

子组件
使用传入数组额方式动态展示需要显示的按钮

<script setup lang="ts">
defineProps<{
  options: { label: string; value: number | string }[]
  modelValue?: number | string
    }>()
  defineEmits<{
  // 触发自定义事件把数据给父组件
   (e: 'update:modelValue', value: number | string): void
}>()
script>

<template>
  <div class="cp-radio-btn">
 
    <a
      class="item"
      href="javascript:;"
      v-for="item in options"
      :key="item.label"
      :class="{ active: modelValue === item.value }"
      @click="$emit('update:modelValue', item.value)"
      >{{ item.label }}a
    >
  div>
template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    //高亮效果
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
style>