LimeUI+1.2.0

主题

LimeKeyboard 虚拟键盘 ​

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

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

文档链接 ​

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

安装方法 ​

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

注意🔔

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

代码演示 ​

默认键盘 ​

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

html
<button @click="visible = true">默认键盘</button>
<l-keyboard v-model="value" v-model:visible="visible" @delete="onDelete"  @input="onInput" @key-up="onKeyUp"></l-keyboard>
js
const value = ref('')
const visible = ref(false)
const onDelete = () => {console.log('删除')}
const onInput = (text: string) => {
	console.log('text', text)
}
const onKeyUp = (text: string) => {
	uni.showToast({
		icon: 'none',
		title: text,
	})
}

带右侧栏的键盘 ​

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

html
<button @click="visible = true">带右侧栏的键盘</button>
<l-keyboard type="custom" v-model:visible="visible" @key-up="onKeyUp"></l-keyboard>
js
const visible = ref(false)
const onKeyUp = (text: string) => {
	uni.showToast({
		icon: 'none',
		title: text,
	})
}

键盘标题 ​

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

html
<button @click="visible = true">带右侧栏的键盘</button>
<l-keyboard type="custom" title="键盘标题" v-model:visible="visible" :extraKey="['.']" @key-up="onKeyUp"></l-keyboard>
js
const visible = ref(false)
const onKeyUp = (text: string) => {
	uni.showToast({
		icon: 'none',
		title: text,
	})
}

配置多个按键 ​

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

html
<button @click="visible4 = true">配置多个按键</button>
<l-keyboard type="custom" v-model:visible="visible4"  :extraKey="['00','.']" @key-up="onKeyUp"></l-keyboard>
js
const visible = ref(false)
const onKeyUp = (text: string) => {
	uni.showToast({
		icon: 'none',
		title: text,
	})
}

身份证键盘 ​

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

html
<button @click="visible4 = true">配置多个按键</button>
<l-keyboard type="idcard" v-model:visible="visible4" @key-up="onKeyUp"></l-keyboard>
js
const visible = ref(false)
const onKeyUp = (text: string) => {
	uni.showToast({
		icon: 'none',
		title: text,
	})
}

车牌键盘 ​

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

html
<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="onKeyUp"></l-keyboard>
js
const value = ref('')
const visible = ref(false)
const focused = ref(false)
const onKeyUp = (text: string) => {
	uni.showToast({
		icon: 'none',
		title: text,
	})
}

异步关闭 ​

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

html
<button @click="visible = true">异步关闭</button>
<l-keyboard 
	type="custom" 
	v-model:visible="visible1" 
	@key-up="onKeyUp" 
	:extraKey="['.']" 
	:beforeClose="beforeClose">
</l-keyboard>
js
const visible = ref(false)
const onKeyUp = (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中添加）：

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

快速预览 ​

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

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

插件标签说明 ​

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

API文档 ​

Props ​

参数说明类型默认值
v-model值string-
v-model:visible是否弹出键盘booleanfalse
type键盘类型，可选值custom、default、car、idcardstringdefault
safeAreaInsetBottom是否开启底部安全区适配booleantrue
showDeleteKey是否显示删除键booleantrue
randomKeyOrder是否将通过随机顺序展示按键booleanfalse
extraKey当配置type为custom时可配置string[]-
closeText关闭按钮文本string完成
deleteText删除按钮文本string-
maxlength最大输入长度number-
overlay是否显示遮罩booleanfalse
title键盘标题string-
beforeClose关闭前的回调函数，返回 PromiseFunction-

Events ​

事件名说明回调参数
delete点击删除键触发-
input点击按键时触发，回调已经输入的字符key: string
key-up点击按键时触发，回调当前按键的字符key: string
close点击关闭按钮时触发-
blur失焦时触发-

主题定制 ​

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

变量名称默认值描述
--l-keyboard-bg-color#E5E7EB键盘整体背景色
--l-keyboard-color$text-color-1键盘主文本颜色
--l-keyboard-border-radius$border-radius键盘整体圆角
--l-keyboard-key-bg-color#fff按键默认背景色
--l-keyboard-key-hover-bg-colorrgba(255,255,255,0.6)按键悬停背景色
--l-keyboard-key-border-radius$border-radius按键圆角
--l-keyboard-key-gap6px按键间距
--l-keyboard-close-bg-color$primary-color关闭按钮背景色
--l-keyboard-close-hover-bg-color$primary-color-7关闭按钮悬停背景色
--l-keyboard-key-height55px标准按键高度
--l-keyboard-font-size$font-size-heading-3标准按键字体大小
--l-keyboard-mini-key-height42px小型按键高度
--l-keyboard-mini-font-size$font-size-md小型按键字体大小
--l-keyboard-icon-size$font-size-heading-2图标尺寸
--l-keyboard-icon-font-size18px图标字体大小
--l-keyboard-icon-bg-colorwhite图标背景色
--l-keyboard-icon-color$text-color-3图标颜色

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码