Radio单选框组件封装（学习笔记）

文章目录

前言
一、单选框基础布局
二、使用这个组件
总结

前言

单选框组件的封装

一、单选框基础布局

首先要现在文件radioBtn.vue文件

<script setup lang="ts">
defineProps<{
  options: {
    label: string
    value: string | number
  }[]
  modelValue?: string | number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
}>()
const toggleItem = (value: string | number) => {
  // 触发自定义事件把数据给父组件
  emit('update:modelValue', value)
}

</script>

<template>
  <div class="radio_btn">
   <a
      class="item"
      href="javascript:;"
      v-for="item in options"
      :key="item.value"
      // 这个类自己在样式中添加就行，运用于动态高亮显示
      :class="{ active: modelValue === item.value }"
       @click="toggleItem(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>

二、使用这个组件

在任意地方.vue组件中引入这个组件进行使用。
代码如下（示例）：

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

<template>
 <radioBtn :options="options" v-model="gender"></radioBtn>
</template>

<style lang="scss" scoped></style>