kevin4j/vehicle-plate-keyboard

**车牌号键盘 for React ，自动匹配省份 + 字母（无 I/O）/ 数字 + 「港澳学警领」和新能源车牌

vehicle-plate-keyboard

A Chinese vehicle plate number keyboard for React (not a really keyboard, just a modal)

React 实现的车牌键盘。

基于 https://github.com/LiuuY/vehicle-plate-keyboard 的分支，由于原组件是使用在手机端上，导致在PC上无法正常使用，调整如下：

1. 进行PC打包时去掉webpack.config.js中postcss-px-to-viewport的转换
2. 修复PC中关闭键盘时页面抖动问题
3. 修复PC中Modal窗口中无法使用键盘的情况
4. 增加cross-env，支持windows打包

💡 Features

• 省份 + 字母（无 I/O）/ 数字 + 「港澳学警领」
• 新能源车牌规则

🚗 Demo (Mobile)

📦 Installation (Mobile)

yarn add vehicle-plate-keyboard

🔨 Usage (Mobile)

import LicenseKeyboard from 'vehicle-plate-keyboard';
import 'vehicle-plate-keyboard/dist/main.css';

...

<LicenseKeyboard
   visible={state.showKeyboard}
   onChange={value => setState({ value })}
   value={state.value}
   done={() => setState({ showKeyboard: false })}
/>

🗺 API

props	type	description
visiable	boolean	keyboard visible
onChange	(value: string) => void	trigger when user tap
value	string	controlled value
done	() => void	trigger when keyborad dismiss
confirmButtonStyle	React.CSSProperties	confirm button style
confirmButtonText	string	confirm button text
cellTextStyle	React.CSSProperties	keycell style

🚧 Development

vehicle-plate-keyboard use Storybook for developing in isolation.

yarn storybook

浏览器中访问 http://localhost:6006/

如果需要调试PC，去掉./storybook/webpack.config.js中postcss-px-to-viewport即可

🔨 Build

mobile端打包

npm run build

pc端打包

npm run build-pc

📝 License

MIT License