Радио

Радио-кнопка используется для выбора одного из многих

Перевернуть

TestValue1

TestValue2

TestValue3

TestValue4

TestValue5

Для разработчиков

Это Дженерик компонент, где Props.value может иметь любой тип. Так же необходимо передать колбэк для обновления текущего активного значения.

Props

interface Props {
    textPosition?: 'left' | 'right' // отвечает за позицию текста
    text?: string 
    isAcitve: boolean
    value: T
    updateValue: (val: T) => void // коллбюэк для обновления 
    // текущего активного значения
}

const props = withDefaults(defineProps<Props>(),{
    textPosition: 'right'
})

Пример использования

<script setup lang="ts">
const mockRadioInputs = reactive<MockInput[]>([
    new MockInput('TestValue1', "1"),
    new MockInput('TestValue2', "2"),
    new MockInput('TestValue3', "3"),
    new MockInput('TestValue4', "4"),
    new MockInput('TestValue5', "5"),
])

const handleUpdate = (val: Nullable<string>) =>{
    activeValue.value = val
}
</script>

<template>
    <div class="pfm-radio-example">
            <PfmRadio 
            v-for="input in mockRadioInputs" 
            :key="input.value" 
            :text="input.text"
            :value="input.text"
            :update-value="handleUpdate"
            :is-acitve="activeValue === input.text"
            />
    </div>
</template>