Vue 3

Introduction

虚拟键盘组件

Installation

npm install @yeepay/virtual-keyboard

Usage

1、全局引入（main.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）

<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

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

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

<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>

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 |