uniapp中的uview组件库丰富的Keyboard 键盘 用法

简介: uniapp中的uview组件库丰富的Keyboard 键盘 用法

基本使用

通过mode参数定义键盘的类型,show绑定一个值为布尔值的变量控制键盘的弹出与收起:

  • mode = car (默认值)为汽车键盘,此时顶部工具条中间的提示文字为"车牌号键盘"
  • mode = number为数字键盘,此时顶部工具条中间的提示文字为"数字键盘"
  • mode = card 为身份证键盘,此时顶部工具条中间的提示文字为"身份证键盘"
<template>
  <view>
    <u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard>
    <u-button @click="show = true">打开</u-button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

#隐藏键盘"."符号

  • 通过dotDisabled参数配置是否显示键盘"."符号,默认为false,只在"mode = number"时生效
<u-keyboard mode="number" :dotDisabled="true"></u-keyboard>

#是否打乱按键的顺序

如果配置random参数为true的话,每次打开键盘,按键的顺序都是随机的,该功能默认是关闭的

<u-keyboard ref="uKeyboard" mode="number" :random="true" :show="show"></u-keyboard>

#如何控制键盘的打开和关闭?

<template>
  <u-keyboard mode="number" :show="show"></u-keyboard>
</template>
<script>
  export default {
    onReady() {
      // 如果想一进入页面就打开键盘,请在此生命周期调用
      this.show = true;
    },
    onLoad() {
      // 不应在此调用,因为此时u-keyboard组件尚未创建完成
      // this.show = true;
    }
  }
</script>

#如何监听键盘按键被点击?

  • 输入值是通过组件的change事件实现的,组件内部每个按键被点击的时候,组件就会发出一个change事件,回调参数为点击的按键的值。
  • 通过backspace事件监听键盘退格键的点击,通过修改父组件的值实现退格的效果,见下方示例

注意:点击退格键(也即删除键)不会触发change事件

<template>
  <u-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></u-keyboard>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        show: false
      }
    },
    methods: {
      // 按键被点击(点击退格键不会触发此事件)
      valChange(val) {
        // 将每次按键的值拼接到value变量中,注意+=写法
        this.value += val;
        console.log(this.value);
      },
      // 退格键被点击
      backspace() {
        // 删除value的最后一个字符
        if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
        console.log(this.value);
      }
    }
  }
</script>

API

#Props

参数 说明 类型 默认值 可选值
mode 键盘的类型,number-数字键盘,card-身份证键盘,car-车牌号键盘 String car number / card
dotDisabled 是否显示"."按键,只在mode=number时有效 Boolean false true
tooltip 是否显示键盘顶部工具条 Boolean true false
showTips 是否显示工具条中间的提示 Boolean true false
tips 工具条中间的提示文字,见上方基本使用的说明 String - -
showCancel 是否显示工具条左边的"取消"按钮 Boolean true false
showConfirm 是否显示工具条右边的"完成"按钮 Boolean true false
random 是否打乱键盘按键的顺序 Boolean false true
safeAreaInsetBottom 是否开启底部安全区适配 Boolean false true
closeOnClickOverlay 是否允许点击遮罩收起键盘(注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调) Boolean true false
show 控制键盘的弹出与收起 Boolean true false
overlay 是否显示遮罩 Boolean true false
zIndex 弹出键盘的z-index String | Number 1075 -
confirmText 确认按钮的文字 String 确认 -
cancelText 取消按钮的文字 String 取消 -
customStyle 自定义样式,对象形式 Object {} -
autoChange modecar下,输入文字后,是否自动切换为字母模式 Boolean false true

#Events

事件名 说明 回调参数 版本
change 按键被点击(不包含退格键被点击) 按键的值,见上方说明和示例 -
close 键盘关闭 - -
confirm 键盘顶部工具条右边的"完成"按钮被点击 - -
cancel 键盘顶部工具条左边的"取消"按钮被点击 - -
backspace 键盘退格键被点击 - -

#Slot

名称 说明 版本
default 内容将会显示键盘的工具条上面,可以结合MessageInput 验证码输入组件实现类似支付宝输入密码时,上方显示输入内容的功能 -
目录
打赏
0
0
0
0
22
分享
相关文章
|
4月前
|
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
198 10
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
145 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
124 0
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
60 1
|
7月前
|
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
164 0
|
7月前
uniapp 安装插件 uView (多平台快速开发的UI框架)
uniapp 安装插件 uView (多平台快速开发的UI框架)
343 0
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
155 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
90 7
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
112 7
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
138 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等