├── static ├── 1.jpg ├── 2.jpg └── 3.png ├── package.json ├── CHANGE_LOG.md ├── README.md └── components └── keyboard └── index.vue /static/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weiyunpeng/mpvue-keyboard/HEAD/static/1.jpg -------------------------------------------------------------------------------- /static/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weiyunpeng/mpvue-keyboard/HEAD/static/2.jpg -------------------------------------------------------------------------------- /static/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weiyunpeng/mpvue-keyboard/HEAD/static/3.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mpvue-keyboard", 3 | "version": "1.2.2", 4 | "description": "一个车牌输入键盘组件，支持新能源车牌号输入", 5 | "main": "components/keyboard/index.vue", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/weiyunpeng/mpvue-keyboard.git" 12 | }, 13 | "keywords": [ 14 | "mpvue", 15 | "keyboard" 16 | ], 17 | "author": "Mr.Ypeng", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/weiyunpeng/mpvue-keyboard/issues" 21 | }, 22 | "homepage": "https://github.com/weiyunpeng/mpvue-keyboard#readme", 23 | "dependencies": {} 24 | } 25 | -------------------------------------------------------------------------------- /CHANGE_LOG.md: -------------------------------------------------------------------------------- 1 | 1.0.3 / 2018-07-09 2 | ================== 3 | * 删除IO 4 | * 修复删除按钮问题 5 | * 增加sass-bem 6 | * 删除背景 7 | 8 | 1.0.4 / 2018-07-10 9 | ================== 10 | * 引入base.scss 11 | 12 | 1.0.5 / 2018-07-12 13 | ================== 14 | * 修改新能源车牌选择逻辑：只有主动点击才能输入新能源车牌号，否则只能输入普通车牌号 15 | 16 | * 修改输入框，新能源提示的样式 17 | 18 | 1.0.6 / 2018-07-17 19 | ================== 20 | * 兼容iphone5 21 | 22 | 1.0.7 / 2018-09-04 23 | ================== 24 | * 解决key{{NAN}} 25 | * 精简 data 数据 26 | * 底部弹出动画优化 27 | 28 | 1.0.8 / 2018-09-17 29 | ================== 30 | * 移除小程序animate事件 31 | * 页面布局单位由rpx改为px，更改兼容vue原生页面 32 | * 完善api和event 33 | 34 | 1.0.9 / 2018-11-01 35 | ================== 36 | * 兼容无感停车 37 | 38 | 1.1.0 / 2018-11-06 39 | ================== 40 | * 移除scss-bem 41 | * 移除scss，兼容原生css 42 | * 增加动态获取输入的车牌号 43 | * 完善demo 44 | 45 | 1.1.1 / 2018-11-28 46 | ================== 47 | * 更新文档 48 | 49 | 1.1.2 / 2019-02-22 50 | ================== 51 | * 部分手机兼容处理 52 | 53 | 1.1.3 / 2019-02-22 54 | ================== 55 | * 部分手机兼容处理 56 | * 增加自定义完成按钮可点击时的样式 57 | 58 | 1.2.0 / 2019-03-21 59 | ================== 60 | * 支持自定义换肤 61 | * 优化部分逻辑与性能 62 | * 支持在网页中正常使用 63 | 64 | 1.2.1 / 2019-03-21 65 | ================== 66 | * 目录结果调整 67 | * 删除冗余内容 68 | 69 | 1.2.2 / 2019-07-02 70 | ================== 71 | * 参数调整 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mpvue-keyboard 基于 mpvue 的小程序虚拟键盘组件 2 | 3 | [![npm package](https://img.shields.io/npm/v/mpvue-keyboard.svg)](https://www.npmjs.com/package/mpvue-keyboard) 4 | [![npm downloads](http://img.shields.io/npm/dm/mpvue-keyboard.svg)](https://www.npmjs.com/package/mpvue-keyboard) 5 | 6 | ## [更新日志](CHANGE_LOG.md) 7 | 8 | ## 效果图 9 | 10 | ![默认效果1](./static/1.jpg) 11 | ![默认效果2](./static/2.jpg) 12 | ![默认效果3](./static/3.png) 13 | 14 | ## API 15 | 16 | | 名称 | 类型 | 默认值 | 描述 | 17 | | ----------- | ------- | -------------------------------------------------------------- | ---------------------- | 18 | | show | Boolean | false | 是否显示键盘 | 19 | | plateNum | String | false | 实时获取输入的车牌号 | 20 | | province | String | 京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤川青藏琼宁渝 | 省份简称键帽内容 | 21 | | natural | String | 1234567890 | 0-9 自然数键帽内容 | 22 | | base-border | String | #cccccc | 自定义输入格子边框颜色 | 23 | | extra-key | String | 完成 | 右下角按键内容 | 24 | 25 | ## Event 26 | 27 | | 事件名 | 说明 | 参数 | 28 | | -------- | ---------------- | --------------------- | 29 | | keyboard | 点击完成键时触发 | key: 按键所选择的内容 | 30 | 31 | ## 基本使用方法 32 | 33 | > [可运行基于 uni-app 的基础框架查看详细例子 https://github.com/omycli/wuc](https://github.com/omycli/wuc) 34 | 35 | - 安装 36 | 37 | ```bash 38 | npm i mpvue-keyboard --save 39 | ``` 40 | 41 | - 使用 42 | 43 | ```html 44 | 64 | 65 | 102 | 132 | ``` 133 | -------------------------------------------------------------------------------- /components/keyboard/index.vue: -------------------------------------------------------------------------------- 1 | 119 | 120 | 212 | 432 | --------------------------------------------------------------------------------