keyboard-components v1.0.4

使用指南

npm i keyboard-components

项目中使用

1、在主入口文件main.js中引入样式

import 'keyboard-components/dist/es/index.css'

2、在需要的地方使用组件

// 导入组件
import { PlateKeyboard }  from 'keyboard-components'

const Home = () => {
  const [value, setValue] = useState('');
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <div className='plate-number'>
        <div className='label'>请输入车牌号：</div>
        <div className='text'>{value}</div>
      </div>
      <button onClick={() => setVisible(true)}>打开输入键盘</button>
      <PlateKeyboard visible={visible} value={value} onChange={e => setValue(e)} confirm={() => setVisible(false)} cancel={() => setVisible(false)}  />
    </div>
  )
}

export default Home

组件属性

组件事件