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

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

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

const props = defineProps<{
  value: any
  modelValue?: any
  disabled?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'change', 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
  const _emit = parent?.emit || emit
  _emit('update:modelValue', props.value)
  _emit('change', props.value)
}
</script>

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

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