<template>
  <un-radio-group
    v-model="radioValue1"
    placement="column"
    @change="groupChange"
  >
    <un-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radioList1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </un-radio>
  </un-radio-group>
</template>

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

// 定义RadioItem类型
type RadioItem = {
  name: string
  disabled: boolean
}

// 基本案例数据
const radioList1 = ref<RadioItem[]>([
  { name: '苹果', disabled: false },
  { name: '香蕉', disabled: false },
  { name: '橙子', disabled: false },
  { name: '榴莲', disabled: false }
])

// un-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
const radioValue1 = ref<string>('苹果')

// 事件处理函数
const groupChange = (value: string | number) => {
  console.log('groupChange', value)
}

const radioChange = (value: string | number) => {
  console.log('radioChange', value)
}
</script>
✅ Copy success!
copy

<template>
  <!-- 圆形样式 -->
  <un-radio-group v-model="shapeValue">
    <un-radio shape="circle" label="月明人倚楼"></un-radio>
  </un-radio-group>

  <!-- 按钮样式 - 镂空效果 -->
  <un-radio-group v-model="shapeValue" shape="button">
    <un-radio label="月明人倚楼"></un-radio>
  </un-radio-group>

  <!-- 按钮样式 - 非镂空效果 -->
  <un-radio-group v-model="shapeValue" shape="button" inactiveColor="#f1f1f1" :plain="false">
    <un-radio label="月明人倚楼"></un-radio>
  </un-radio-group>
</template>

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

const shapeValue = ref<string>('月明人倚楼')
</script>
✅ Copy success!
copy

<template>
  <un-radio-group v-model="disabledValue">
    <un-radio :disabled="true" label="明月几时有"></un-radio>
  </un-radio-group>
</template>

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

const disabledValue = ref<string>('明月几时有')
</script>
✅ Copy success!
copy

<template>
  <un-radio-group v-model="labelDisabledValue">
    <un-radio :labelDisabled="true" label="明月几时有"></un-radio>
  </un-radio-group>
</template>

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

const labelDisabledValue = ref<string>('明月几时有')
</script>
✅ Copy success!
copy

<template>
  <un-radio-group v-model="colorValue">
    <un-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></un-radio>
  </un-radio-group>
</template>

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

const colorValue = ref<string>('思悠悠，恨悠悠，恨到归时方始休')
</script>
✅ Copy success!
copy

<template>
  <un-radio-group 
    v-model="placementValue"
    placement="row">
    <un-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></un-radio>
  </un-radio-group>
</template>

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

const placementValue = ref<string>('思悠悠，恨悠悠，恨到归时方始休')
</script>
✅ Copy success!
copy

<template>
  <un-radio-group 
    v-model="iconPlacementValue"
    iconPlacement="right">
    <un-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></un-radio>
  </un-radio-group>
</template>

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

const iconPlacementValue = ref<string>('思悠悠，恨悠悠，恨到归时方始休')
</script>
✅ Copy success!
copy