vue-ptc/src/components/radio/Radio.vue

<template>
  <div
    :class="['ptc-radio', { 'ptc-radio--checked': checked }]"
    @click="onClick"
  >
    <slot />
  </div>
</template>

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

const props = defineProps<{ value: any; modelValue?: any }>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()
const parent = inject<any>('RadioGroup')

const checked = computed(
  () => props.value === (parent ? parent.modelValue.value : props.modelValue)
)

function onClick() {
  if (checked.value) return
  parent
    ? parent.emit('update:modelValue', props.value)
    : emit('update:modelValue', props.value)
}
</script>

<style lang="scss">
.ptc-radio {
  position: relative;
  border-radius: 8px;
  border: 2px solid #d9d9d9;
  color: #666;
  &--checked {
    border-color: $primary-color;
    color: $primary-color;
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      @include icon('@img/check.png', 68px, 72px);
    }
  }

  &:not(.ptc-radio--checked) [class*='icon-'] {
    filter: grayscale(1);
    opacity: 0.65;
  }
}
</style>