LimeUI+1.0.0

主题

LimeKeyboard 虚拟键盘 ​

  • 虚拟键盘，数字虚拟键盘，车牌虚拟键盘，自定义数字虚拟键盘，身份证虚拟键盘，兼容uniapp/uniappx
  • 插件依赖lime-style,lime-shared,lime-icon,lime-svg不喜勿下

安装 ​

插件市场入口 导入即可，首次安装可能需要重新编译

注意

  • 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
  • 🔔 不需要lime-svg在lime-icon代码中注释掉即可
html
// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

文档 ​

keyboard

代码演示 ​

默认键盘 ​

键盘提供了 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,
	})
}

查看示例 ​

  • 导入后直接使用这个标签查看演示效果
html
 // 代码位于 uni_modules/lime-keyboard/compoents/lime-keyboard 
<lime-keyboard />

插件标签 ​

  • 默认 l-keyboard 为 component
  • 默认 lime-keyboard 为 demo

关于vue2的使用方式 ​

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可.
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API ​

Props ​

参数说明类型默认值
v-model值string-
v-model:visible是否弹出键盘booleanfalae
type键盘类型，可选值`customdefaultcar
safeAreaInsetBottom是否开启底部安全区适配booleantrue
showDeleteKey是否显示删除键booleantrue
randomKeyOrder是否将通过随机顺序展示按键booleanfalse
extraKey当配置type为custom时可配置string[]``
closeText关闭按钮文本string完成
deleteText关闭按钮文本string``
maxlength关闭按钮文本number``
overlay是否显示遮罩booleanfalse

Events ​

事件名说明回调参数
delete点击删除键触发-
input点击按键时触发key: string
key-up点击按键时触发key: string
blur点击关闭按钮时触发

主题定制 ​

样式变量 ​

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

名称默认值描述
--l-keyboard-bg-color:#E5E7EB-
--l-keyboard-color:$text-color-1-
--l-keyboard-border-radius:12rpx-
--l-keyboard-key-bg-color:#fff-
--l-keyboard-key-hover-bg-color:rgba(255,255,255,0.6)_-
--l-keyboard-key-border-radius:12rpx-
--l-keyboard-key-gap:12rpx-
--l-keyboard-close-bg-color:$primary-color-
--l-keyboard-close-hover-bg-color:$primary-color-7-
--l-keyboard-key-height:110rpx-
--l-keyboard-font-size:48rpx-
--l-keyboard-mini-key-height:84rpx-
--l-keyboard-mini-font-size:34rpx-
--l-keyboard-icon-size:60rpx-
--l-keyboard-icon-font-size:36rpx-
--l-keyboard-icon-bg-color:white-
--l-keyboard-icon-color:$text-color-3-

打赏 ​

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码 ​

组件源码