Skip to content

自定义数字键盘, 仿照大众点评闪惠买单的键盘

Notifications You must be signed in to change notification settings

helicopters/wc-keyboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

wc-keyboard

基于 vue 封装的一个自定义数字键盘 + 输入框, 仿照大众点评闪惠买单.

why?

  1. 刚开始选用 input type = tel, 发现移动端没有办法输入小数
  2. 换成 input type = text, 发现唤起的键盘不是数字键盘
  3. 最终选择 input type = number, 又发现验证规则有部分实现不了

效果

效果

更新

后来我想了下, 可以通过监听键盘点击事件, 然后拿到输入值的 keyCode 从而进行值的验证. 但是这样缺少一个自定义的输入框, 输入框无法实现类似大众点评那般.

感谢

xwpongithub/better-keyboard

使用方法

npm i wc-keyboard --save
import wcKeyBoard from 'wc-keyboard'
import 'wc-keyboard/style.css'
Vue.use(wcKeyBoard);
<wc-keyboard
	v-model="value"   // 输入框的值
	inter="5"         // 限制整数位数
	decimal="2"       // 小数位数
	placeholder="询问服务员后输入"
	label="消费金额"/>

About

自定义数字键盘, 仿照大众点评闪惠买单的键盘

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published