更新记录
0.0.2(2024-11-13) 下载此版本
- chore: 更新文档
0.0.1(2024-11-13) 下载此版本
- init
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.32 app-vue app-uvue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
lime-keyboard 虚拟键盘
- 虚拟键盘,数字虚拟键盘,车牌虚拟键盘,自定义数字虚拟键盘,身份证虚拟键盘,兼容uniapp/uniappx
- 插件依赖
lime-style
,lime-shared
,lime-icon
,lime-svg
不喜勿下
安装
在插件市场导入即可,首次安装可能需要重新编译
代码演示
默认键盘
键盘提供了 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"
activeBorderWidth="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,
})
}
查看示例
- 导入后直接使用这个标签查看演示效果
// 代码位于 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部分加上这一段即可.
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 值 | string | - |
v-model:visible | 是否弹出键盘 | boolean | falae |
type | 键盘类型,可选值custom|default|car|idcard |
string | default |
safeAreaInsetBottom | 是否开启底部安全区适配 | boolean | true |
showDeleteKey | 是否显示删除键 | boolean | true |
randomKeyOrder | 是否将通过随机顺序展示按键 | boolean | false |
extraKey | 当配置type为custom时可配置 | string[] | `` |
closeText | 关闭按钮文本 | string | 完成 |
deleteText | 关闭按钮文本 | string | `` |
maxlength | 关闭按钮文本 | number | `` |
overlay | 是否显示遮罩 | boolean | false |
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 | - |
常见问题
插件包含一下lime-svg为收费插件。如果你不需要svg,可以在lime-icon里注释掉,lime-svg为APP原生插件,收费为1元,源码为5元。如果你需要svg,可以考虑一下购买。
// 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> -->
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。