@daysnap/horn-ui/src/hor-license-plate-prefix/README.md

hron ui

# HorLicensePlatePrefix


### 介绍

车牌前缀选择器，支持自定义车牌，

## 代码演示

### 基础用法
```html
<hor-cell label="请选择车牌前缀" @click="handleClick" :value="licensePre" arrow></hor-cell>
<hor-license-plate-prefix ref="refLicense" />
<script setup lang="ts">
  const refLicense = ref<HorLicensePlatePrefixInstance>()
  const licensePre = ref()
  const handleClick = async () => {
    try {
      licensePre.value = await refLicense.value?.show({
        modelValue: licensePre.value,
      })
    } catch (err) {
      console.log('err =>', err)
    }
  }
</script>
```

### 支持v-model，无车牌

```html
<hor-cell
  label="请选择车牌前缀v-model风格"
  @click="handleClick2"
  :value="licensePre2"
  arrow
></hor-cell>
<hor-license-plate-prefix ref="refLicense2" v-model="licensePre2" />
<script setup lang="ts">
  const licensePre2 = ref('')
  const refLicense2 = ref<HorLicensePlatePrefixInstance>()
  const handleClick2 = () => {
    refLicense2.value?.show().catch((err) => {
      console.log('err =>', err)
    })
  }
</script>
```

### 扩展车牌

```html
<hor-cell label="自定义车牌前缀" @click="handleClick3" :value="licensePre3" arrow></hor-cell>
<hor-license-plate-prefix ref="refLicense" />
<script setup lang="ts">
  const licensePre3 = ref()
  const handleClick3 = async () => {
    try {
      licensePre3.value = await refLicense.value?.show({
        modelValue: licensePre.value,
        expand: ['港', '澳', '豫A'],
        showNone: false,
      })
    } catch (err) {
      console.log('err =>', err)
    }
  }
</script>
```

## API

### 属性 Props

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