Radio 单选框 ​

<template>
  <div>
    <w-title class="mb-4">默认</w-title>
    <div class="flex gap-4 mb-4">
      <w-radio-group v-model="radio1">
        <w-radio value="1" size="large">选项 1</w-radio>
        <w-radio value="2" size="large">选项 2</w-radio>
      </w-radio-group>
      <w-radio-group v-model="radio2">
        <w-radio value="1">选项 1</w-radio>
        <w-radio value="2">选项 2</w-radio>
      </w-radio-group>
      <w-radio-group v-model="radio3">
        <w-radio value="1" size="small">选项 1</w-radio>
        <w-radio value="2" size="small">选项 2</w-radio>
      </w-radio-group>
    </div>
    <w-title>禁用：设置 disabled 属性即可。</w-title>
    <div class="flex gap-4">
      <w-radio v-model="radio" disabled value="disabled">选项 A</w-radio>
      <w-radio v-model="radio" disabled value="selected and disabled">
        选项 B
      </w-radio>
    </div>
  </div>
</template>

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

const radio = ref('selected and disabled')
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
</script>

<template>
  <div>
    <w-radio-group
      v-model="radio"
      allow-deselect
      :options="options"
      :props="props"
      @change="handleChange"
    />
  </div>
</template>

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

const radio = ref(3)
const props = { value: 'id', label: 'name', disabled: 'unable' }
const options = [
  {
    id: 3,
    name: '耳鼻喉科',
  },
  {
    id: 6,
    name: '眼科',
  },
  {
    id: 8,
    name: '口腔科',
  },
  {
    id: '10',
    name: '皮肤科',
  },
  {
    id: 9,
    name: '皮肤科',
    unable: true,
  },
]

function handleChange(val) {
  console.log(val)
}
</script>

<template>
  <div class="flex gap-4">
    <w-radio-group v-model="radio" :options="options" :props="props" />
    <w-radio-group
      v-model="radio"
      type="button"
      :options="options"
      :props="props"
    />
  </div>
</template>

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

const radio = ref(3)
const props = { value: 'id', label: 'name', disabled: 'unable' }
const options = [
  {
    id: 3,
    name: '耳鼻喉科',
  },
  {
    id: 6,
    name: '眼科',
  },
  {
    id: 9,
    name: '皮肤科',
    unable: true,
  },
]
</script>

<template>
  <w-radio-group v-model="radio">
    <w-radio :value="3">选项 A</w-radio>
    <w-radio :value="6">选项 B</w-radio>
    <w-radio :value="9">选项 C</w-radio>
  </w-radio-group>
</template>

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

const radio = ref(3)
</script>

<template>
  <div>
    <w-radio-group v-model="radio1" size="large">
      <w-radio-button label="自费" value="自费" />
      <w-radio-button label="医保" value="医保" />
      <w-radio-button label="本地" value="本地" />
      <w-radio-button label="其它" value="其它" />
    </w-radio-group>
  </div>
  <div style="margin-top: 20px">
    <w-radio-group v-model="radio2">
      <w-radio-button label="自费" value="自费" />
      <w-radio-button label="医保" value="医保" />
      <w-radio-button label="本地" value="本地" />
      <w-radio-button label="其它" value="其它" />
    </w-radio-group>
  </div>
  <div style="margin-top: 20px">
    <w-radio-group v-model="radio3" size="small">
      <w-radio-button label="自费" value="自费" />
      <w-radio-button label="医保" value="医保" disabled />
      <w-radio-button label="本地" value="本地" />
      <w-radio-button label="其它" value="其它" />
    </w-radio-group>
  </div>
  <div style="margin-top: 20px">
    <w-radio-group v-model="radio3" size="mini">
      <w-radio-button label="自费" value="自费" />
      <w-radio-button label="医保" value="医保" disabled />
      <w-radio-button label="本地" value="本地" />
      <w-radio-button label="其它" value="其它" />
    </w-radio-group>
  </div>
</template>

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

const radio1 = ref('自费')
const radio2 = ref('自费')
const radio3 = ref('自费')
</script>

<template>
  <div>
    <w-radio-group v-model="radio1">
      <w-radio value="1" size="large" border>选项 A</w-radio>
      <w-radio value="2" size="large" border>选项 B</w-radio>
    </w-radio-group>
  </div>
  <div style="margin-top: 20px">
    <w-radio-group v-model="radio2">
      <w-radio value="1" border>选项 A</w-radio>
      <w-radio value="2" border>选项 B</w-radio>
    </w-radio-group>
  </div>
  <div style="margin-top: 20px">
    <w-radio-group v-model="radio3" size="small">
      <w-radio value="1" border>选项 A</w-radio>
      <w-radio value="2" border disabled>选项 B</w-radio>
    </w-radio-group>
  </div>
  <div style="margin-top: 20px">
    <w-radio-group v-model="radio4" size="mini" disabled>
      <w-radio value="1" border>选项 A</w-radio>
      <w-radio value="2" border>选项 B</w-radio>
    </w-radio-group>
  </div>
</template>

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

const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')
</script>