@yeepay/virtual-keyboard/README.md

YeePay Virtual Keyboard Component

# Vue 3

## Introduction

虚拟键盘组件

## Installation

```shell
npm install @yeepay/virtual-keyboard
```

## Usage

### 1、全局引入（main.js）

```js
import YeepayKeyboard from '@yeepay/virtual-keyboard'
import Vue from 'vue'
import '@yeepay/virtual-keyboard/dist/css/index.css'
// 或者
import '@yeepay/virtual-keyboard/dist/less/index.less'

Vue.use(YeepayKeyboard)
```

### 2. 按需引入

#### 组件内引入（App.vue）

```vue
<script>
import { YeepayKeyboard, YeepayMobileKeyboard } from '@yeepay/virtual-keyboard'

// 按需引入样式 - CSS 文件
import '@yeepay/virtual-keyboard/dist/style/pc.css'
import '@yeepay/virtual-keyboard/dist/style/mobile.css'

// 或者引入 Less 源文件（支持自定义主题）
import '@yeepay/virtual-keyboard/dist/style/pc.less'
import '@yeepay/virtual-keyboard/dist/style/mobile.less'

export default {
  components: {
    YeepayKeyboard,
    YeepayMobileKeyboard
  }
}
</script>

<template>
  <div>
    <YeepayKeyboard />
    <YeepayMobileKeyboard />
  </div>
</template>
```

#### 样式文件说明

| 文件路径                                         | 说明                    | 使用场景               |
| ------------------------------------------------ | ----------------------- | ---------------------- |
| `@yeepay/virtual-keyboard/dist/css/index.css`    | 完整样式（PC + Mobile） | 开发环境，需要完整功能 |
| `@yeepay/virtual-keyboard/dist/css/pc.css`       | PC 端样式               | 仅 PC 端项目           |
| `@yeepay/virtual-keyboard/dist/css/mobile.css`   | Mobile 端样式           | 仅移动端项目           |
| `@yeepay/virtual-keyboard/dist/less/index.less`  | 完整 Less 源文件        | 需要自定义主题         |
| `@yeepay/virtual-keyboard/dist/less/pc.less`     | PC 端 Less 源文件       | PC 端自定义主题        |
| `@yeepay/virtual-keyboard/dist/less/mobile.less` | Mobile 端 Less 源文件   | 移动端自定义主题       |

### PC demo

```vue
<template>
  <div>
    <YeepayKeyboard
      style="width: 400px;"
      :max-length="12"
      algorithms="RSA2048"
      @confirm="handleConfirm"
    />
  </div>
</template>
```

```js
import { YeepayKeyboard } from '@yeepay/virtual-keyboard'

export default {
  components: {
    YeepayKeyboard
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleConfirm(value) {
      this.value = value
      // {raw: 'xxxxx'}
    }
  }
}
```

## YeepayKeyboard Options

| 参数       | 说明                                                                              | 类型   | 默认值                         |
| ---------- | --------------------------------------------------------------------------------- | ------ | ------------------------------ |
| algorithms | 键盘算法 'SM2', 'RSA2048'                                                         | string | 'RSA2048'                      |
| max-length | 最大输入长度                                                                      | number | 12                             |
| placement  | 弹窗位置 'bottom-start', 'bottom-end', 'top-start', 'top-end'，只有 pc 场景下有效 | string | 'bottom-end'                   |
| zIndex     | Number                                                                            | 2010   | 键盘的 z-index 值，最小值 2010 |

### Mobile demo

```vue
<template>
  <div>
    <van-field
      v-model="mobilePassword"
      type="password"
      label="密码"
      readonly
      @click="showDialog"
    />

    <YeepayMobileKeyboard
      v-if="showMobileKeyboard"
      :visible="showMobileKeyboard"
      type="NUMBER"
      :max-length="3"
      style="z-index: 2500;"
      algorithms="SM2"
      :close-on-click-overlay="true"
      @input-change="inputChange"
      @cancel="showMobileKeyboard = false"
      @confirm="handleConfirm"
    />
  </div>
</template>
```

```js
import { YeepayMobileKeyboard } from '@yeepay/virtual-keyboard'

export default {
  components: {
    YeepayMobileKeyboard
  },
  data() {
    return {
      mobilePassword: '',
      mobilePasswordMask: '',
      showMobileKeyboard: false,
    }
  },
  methods: {
    showDialog() {
      this.showMobileKeyboard = true
    },
    inputChange(val) {
      let { password, maskPassword } = val
      this.mobilePassword = password
      this.mobilePasswordMask = maskPassword
    },
  }
}
```

### YeepayMobileKeyboard Options

| 参数                   | 说明                                  | 类型    | 默认值                         |
| ---------------------- | ------------------------------------- | ------- | ------------------------------ |
| algorithms             | 键盘算法 'SM2', 'RSA2048'             | string  | 'RSA2048'                      |
| max-length             | 最大输入长度                          | number  | 12                             |
| type                   | 键盘类型 'NUMBER', 'LETTER', 'SYMBOL' | string  | 'LETTER'                       |
| close-on-click-overlay | 是否在点击遮罩层时关闭键盘            | boolean | false                          |
| max-length             | 最大输入长度                          | number  | 12                             |
| zIndex                 | Number                                | 2010    | 键盘的 z-index 值，最小值 2010 |
| clearable              | 是否显示清除按钮                      | boolean | true                           |

### Events

| 事件               | 说明                   | 参数                                       |
| ------------------ | ---------------------- | ------------------------------------------ |
| input-change       | 输入变化时触发         | { password: string, maskPassword: string } |
| confirm            | 确认输入时触发         | { password: string }                       |
| cancel             | 取消输入时触发         | -                                          |
| max-length-reached | 最大输入长度达到时触发 | true                                       |