vue3 实现自定义radio

原创已于 2025-03-25 11:31:22 修改 · 969 阅读

8 ·

CC 4.0 BY-SA版权

柳晓黑胡椒

文章标签：

#vue.js #javascript #ecmascript

于 2024-01-25 14:08:54 首次发布

vue实践专栏收录该内容

24 篇文章

订阅专栏

该篇文章介绍了如何在bgRadio.vue组件中创建一个具有自定义选中样式的Radio按钮，使用了Vue的TS编写和计算属性，展示了如何控制其选中状态和样式。

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

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作者：柳晓黑胡椒❣️
📝 专栏：vue实践
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

需求背景
解决效果
bgRadio.vue

需求背景

实现一个自定义选中样式的 radio
在这里插入图片描述

解决效果

在这里插入图片描述

bgRadio.vue

<!--/**
* @author: liuk
* @date: 2024/01/25
* @describe: 背景单选框
* @email: 1229223630@qq.com
*/-->
<template>
  <div class="radio-wrap">
    <label class="radio-label" :for="modelValue" @click.prevent="radioValue = !radioValue">
      <input type="radio" :id="modelValue"  :checked="radioValue" />
      <i></i>
    </label>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props=  defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const radioValue = computed({
  get() {
    console.log(props.modelValue,333)
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
})
</script>

<style lang="scss" scoped>
.radio-wrap {
  display: inline-block;

  .radio-label {
    position: relative;
    top: 5px;
    display: inline-block;
    height: 25px;
    padding-left: 25px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 5px;
    font-weight: normal;

    &.select {
      color: #dfae64;
    }

    input {
      position: absolute;
      left: -1px;
      top: 6px;
      z-index: -1;
      /*给与input标签相邻的i标签设置伪元素*/
      & + i::after {
        position: absolute;
        content: '';
        top: 5px;
        left: 8px;
        width: 13px;
        height: 13px;
      }

      & + i::before {
        position: absolute;
        content: '';
        top: 5px;
        left: 8px;
        width: 13px;
        height: 13px;
        border: 1px solid #0a0a0a;
        box-sizing: border-box;
        background: #fff;
      }

      /*input radio被选中后，给它相邻的i::after 设置样式*/
      &:checked + i::after {
        //background: url('@/assets/images/login/check.png') no-repeat center/cover;
        background: #0a0a0a;
      }
    }
  }
}
</style>