@daysnap/horn-ui/src/hor-radio/README.md

hron ui

# HorRadio


### 介绍

一个搭配cell组成的radio组件


## 代码演示


### 基础用法

```html
<hor-radio
  label="合同类型"
  v-model="checked"
  :options="options1"
  icon="user-o"
  icon-size="20px"
  required
  @change="handleChange"
/>
<script setup lang="ts">
  const checked = ref('')
  const options1 = [
    {
      label: '公司',
      value: '0',
    },
    {
      label: '个人',
      value: '1',
    },
    {
      label: '集团',
      value: '2',
    },
  ]
  const handleChange = (arg: any) => {
    console.log('val =>', arg)
  }
</script>
```

### 禁用
```html
<hor-radio
  label="选项禁用"
  direction="column"
  v-model="checked2"
  :options="options2"
  shape="square"
/>
<hor-radio 
  label="全部禁用" 
  v-model="checked3"
  :options="options1" 
  :disabled="true" 
/>
<script setup lang="ts">
  const checked2 = ref('')
  const options2 = options1.map((item) => ({
    ...item,
    label: item.label + '合作',
    disabled: item.value === '2',
  }))
  const checked3 = ref('')
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horRadioProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorRadio, horRadioProps } from '.'
  import { parseType } from '../utils'
</script>