封装一个自定义的单选按钮组件（vue3-ts）

最新推荐文章于 2025-01-22 19:46:45 发布

画了五官的猕猴

最新推荐文章于 2025-01-22 19:46:45 发布

阅读量483

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/luoxiaonuan_hi/article/details/130552049

版权

文章介绍了如何基于Vue自定义一个可复用的单选按钮组件cp-radio-btn，该组件接受sexList数组作为选项数据，并通过v-model绑定number或string类型的值。组件样式类似于Vant组件，实现了动态切换选中状态的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景，需要类似如下图的一个单选按钮组件，所以自己封装一个可以随时复用

组件：cp-radio-btn

<script setup lang="ts">
defineProps<{
  sexList: { 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 sexList"
      :key="item.value"
      :class="{ active: modelValue == item.value }"
      @click="$emit('update:modelValue', item.value)"
      >{
  { item.label }}</a