更新记录

0.0.7（2025-08-31） 下载此版本

• chore: 更新文档

0.0.6（2025-04-09） 下载此版本

• feat: 增加beforeClose异步关闭事件

0.0.5（2025-03-12） 下载此版本

• fix: 修复uniapp x 关闭触发两次的问题

平台兼容性

uni-app(4.73)

uni-app x(4.75)

其他

lime-keyboard 虚拟键盘

一个功能丰富的虚拟键盘组件，支持数字键盘、车牌键盘、身份证键盘和自定义键盘等多种类型，兼容uniapp/uniappx。

插件依赖：lime-style、lime-shared、lime-icon、lime-svg

文档链接

📚 组件详细文档请访问以下站点：

• 虚拟键盘文档 - 站点1
• 虚拟键盘文档 - 站点2
• 虚拟键盘文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-keyboard
2. 首次导入可能需要重新编译
3. 在页面中使用l-keyboard组件（组件）或lime-keyboard（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

默认键盘

键盘提供了 input、delete、blur 事件，分别对应输入内容、删除内容和失去焦点的动作。

<button @click="visible = true">默认键盘</button>
<l-keyboard v-model="value" v-model:visible="visible" @delete="onDelete"  @input="onInput" @key-up=""></l-keyboard>

const value = ref('')
const visible = ref(false)
const onDelete = () => {console.log('删除')}
const onInput = (text: string) => {
    console.log('text', text)
}
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}

带右侧栏的键盘

将 type 属性设置为 custom 来展示键盘的右侧栏，常用于输入金额的场景。

<button @click="visible = true">带右侧栏的键盘</button>
<l-keyboard type="custom" v-model:visible="visible" @key-up=""></l-keyboard>

const visible = ref(false)
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}

键盘标题

通过 title 属性可以设置键盘标题。

<button @click="visible = true">带右侧栏的键盘</button>
<l-keyboard type="custom" title="键盘标题" v-model:visible="visible" :extraKey="['.']" @key-up=""></l-keyboard>

const visible = ref(false)
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}

配置多个按键

当 type 为 custom 时，支持以数组的形式配置两个 extra-key。

<button @click="visible4 = true">配置多个按键</button>
<l-keyboard type="custom" v-model:visible="visible4"  :extraKey="['00','.']" @key-up=""></l-keyboard>

const visible = ref(false)
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}

身份证键盘

当 type 为 idcard 时为身份证键盘。

<button @click="visible4 = true">配置多个按键</button>
<l-keyboard type="idcard" v-model:visible="visible4" @key-up=""></l-keyboard>

const visible = ref(false)
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}

车牌键盘

当 type 为 car 时为车牌键盘。可以配合code-input插件输入车牌

<l-code-input 
    v-model="value" 
    :insertAt="{index:2}" 
    :mask="false" 
    :focused="focused"
    lastElementStyle="background: rgba(225, 252, 236, 1);border: 2px dashed rgba(96, 188, 121, 1);"
    lastElementPlaceholder="新能源"
    lastElementPlaceholderStyle="color: rgba(96, 188, 121, 1); font-size:12px; width:12px"
    :disabledKeyboard="true" 
    activeBorderColor="#E75A2C"
    borderWidth="2px"
    @focus="visible = true; focused = true" 
    :length="8">
</l-code-input>
<l-keyboard type="car" v-model="value" v-model:visible="visible"  @close="focused = false" @key-up=""></l-keyboard>

const value = ref('')
const visible = ref(false)
const focused = ref(false)
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}

异步关闭

当 type 为 custom 时，可通过 beforeClose 属性可以传入一个回调函数，在关闭前进行特定操作。

<button @click="visible = true">异步关闭</button>
<l-keyboard 
    type="custom" 
    v-model:visible="visible1" 
    @key-up="" 
    :extraKey="['.']" 
    :beforeClose="beforeClose">
</l-keyboard>

const visible = ref(false)
const  = (text: string) => {
    uni.showToast({
        icon: 'none',
        title: text,
    })
}
const beforeClose = (detail: UTSJSONObject) => {
    return new Promise((resolve):Promise<boolean>=> {
        const value = parseFloat(detail.getString('value') ?? '0')
        if(isNaN(value) || value < 0.01 || value > 10) {
            resolve(false)
        } else {
            resolve(true)
        }
    })
}

Vue2使用说明

本插件使用了composition-api，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-keyboard/components/lime-keyboard -->
<lime-keyboard />

插件标签说明

• l-keyboard：虚拟键盘组件
• lime-keyboard：演示标签

API文档

Props

Events

主题定制

组件提供了下列CSS变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助