Radio

Single selection among multiple options

Use

Basic Use

Set data attribute will automatic generate options

<template>
  <pro-radio v-model="radio" :data="data" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('')
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radio,
      data,
    }
  },
})
</script>

Disabled State

Set the disabled attribute in prop data

<template>
  <pro-radio v-model="radio" :data="list" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('')
    const list = ref([
      { value: 'Go', label: 'go', disabled: true },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radio,
      list,
    }
  },
})
</script>

Configure binding data key value

Set config attribute. value- v-model bind key; label- display key; disabled- Disabled key; name- name key

<template>
  <pro-radio v-model="radio" :data="data" :config="config" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radio = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radio,
      config,
      data,
    }
  },
})
</script>

Button style

use pro-radio-button then checkbox with button styles

<template>
  <pro-radio-button v-model="radiobutton" :data="data" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const radiobutton = ref('')
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      radiobutton,
      data,
    }
  },
})
</script>

Radio Props

NameDescriptionTypeOptionsDefault
v-modelbinding valuearray--
databinding dataarray--
configconfig the key of dataobject-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, name: ‘name’ }
sizecomponent sizestringlarge / default /small-
disabledwhether disabledboolean-false
text-colorfont color when button is activestring-#ffffff
fillborder and background color when button is activestring-#409EFF
validate-eventwhether to trigger form validationboolean-true

Radio Events

NameDescriptionType
changetriggers when the bound value changes(value: string | number | boolean) => void

RadioButton

Single selection among multiple options

RadioButton Props

NameDescriptionTypeOptionsDefault
v-modelbinding valuearray--
databinding dataarray--
configconfig the key of dataobject-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, name: ‘name’ }
sizecomponent sizestringlarge / default /small-
disabledwhether disabledboolean-false
text-colorfont color when button is activestring-#ffffff
fillborder and background color when button is activestring-#409EFF

RadioButton Events

NameDescriptionType
changetriggers when the bound value changes(value: string | number | boolean) => void