更新记录

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不喜勿下

安装

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

代码演示

默认键盘

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

<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,
    })
}

配置多个按键

typecustom 时,支持以数组的形式配置两个 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,
    })
}

身份证键盘

typeidcard 时为身份证键盘。

<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,
    })
}

车牌键盘

typecar 时为车牌键盘。可以配合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> -->

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问