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

hron ui

# HorKeyboard


### 介绍

支持vin码，车牌号，身份证，电话，数字，和拼音的键盘，支持promise风格，函数风格，v-model风格

## 代码演示

### 函数风格
```html
<hor-cell label="请输入车牌号(函数式)" arrow @click="handleClick5" :value="license2"></hor-cell>
<script setup lang="ts">
  import { KeyBoard } from '@daysnap/horn-ui'
  const license2 = ref()
  const handleClick5 = async () => {
    try {
      license2.value = await KeyBoard({
        type: 'lic',
        modelValue: license2.value,
      })
    } catch (err) {
      console.log('err =>', err)
    }
  }
</script>
```

### 基础用法

```html
<hor-cell label="请输入车牌号" @click="handleClick2" :value="license" arrow></hor-cell>
<hor-cell label="唤起vin码键盘" @click="handleClick3" :value="vin" arrow></hor-cell>
<hor-cell label="请输入身份证" arrow @click="handleClick4" :value="idNum"></hor-cell>
<hor-keyboard ref="refKeyboard" />
<script setup lang="ts">
  const refKeyboard = ref<HorKeyboardInstance>()
  const license = ref()
  const handleClick2 = async () => {
    try {
      license.value = await refKeyboard.value?.show({
        type: 'lic',
        modelValue: license.value,
      })
    } catch (err) {
      console.log('err =>', err)
    }
  }
  const vin = ref()
  const handleClick3 = async () => {
    try {
      vin.value = await refKeyboard.value?.show({
        type: 'vin',
        modelValue: vin.value,
      })
    } catch (err) {
      console.log('err =>', err)
    }
  }
</script>
```

### v-model风格

```html
<hor-cell label="请输入手机号" arrow @click="handleClick" :value="cellPhone"></hor-cell>
<hor-keyboard
  type="phone"
  :disabledKey="['00']"
  placeholder="请输入手机号"
  ref="refKeyboardPhone"
  v-model="cellPhone"
/>
<script setup lang="ts">
  const cellPhone = ref('')
  const refKeyboardPhone = ref<HorKeyboardInstance>()
  const handleClick = () => {
    refKeyboardPhone.value
      ?.show({
        modelValue: cellPhone.value,
      })
      .catch((err) => {
        if (err === 'cancle') {
          console.log(' =>')
        }
      })
  }
</script>
```

## API

### 属性 Props

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