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

hron ui

# HorCheckbox


### 介绍

一个搭配cell组成的checkbox组件


## 代码演示


### 基础用法

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

### 禁用

```html
<hor-checkbox
  label="选项禁用"
  direction="column"
  v-model="checked2"
  :options="options2"
  shape="square"
/>
<hor-checkbox 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>
```

### 最大数量

```html
<hor-checkbox
  label="最大数量2个"
  direction="column"
  :max="2"
  v-model="checked4"
  :options="options4"
/>
<script setup lang="ts">
  const checked4 = ref(['1'])
  const options4 = ['红', '橙', '黄', '绿'].map((v, i) => ({
    label: '小' + v,
    value: i + '',
  }))
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horCheckboxProps" :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 { HorCheckbox, horCheckboxProps } from '.'
  import { parseType } from '../utils'
</script>