uView Keyboard 键盘

此为uView自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过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>

copy

#隐藏键盘"."符号

  • 通过dotDisabled参数配置是否显示键盘"."符号,默认为false,只在"mode = number"时生效

    <u-keyboard mode="number" :dotDisabled="true"></u-keyboard>

copy

#是否打乱按键的顺序

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

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

copy

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

<template>
	<u-keyboard mode="number" :show="show"></u-keyboard>
</template>

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

copy

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

  • 输入值是通过组件的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>
相关推荐
程序媛小果2 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长7 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
吕彬-前端38 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱40 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js