afu-vehicle-plate-keyboard-vue
v0.0.1
Published
vue 实现的车牌键盘。
Downloads
4
Readme
afu-vehicle-plate-keyboard-vue
vue 实现的车牌键盘。
🚗 Demo
📷 Screenshots
📦 Installation【Vue3】
yarn add afu-vehicle-plate-keyboard-vue
🔨 Usage
import { LicenseKeyboard } from 'afu-vehicle-plate-keyboard-vue';
...
<template>
<div>
<button
data-test-id="controlButton"
@click="toggleKeyboard"
type="submit"
>
{{ showKeyboard ? 'close' : 'open' }} the keyboard
</button>
<p data-test-id="value">{{ value }}</p>
<LicenseKeyboard
:visible="showKeyboard"
@done="hideKeyboard"
@onChange="updateValue"
:value="value"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const showKeyboard = ref(false);
const value = ref('');
const toggleKeyboard = () => {
showKeyboard.value = !showKeyboard.value;
};
const hideKeyboard = () => {
showKeyboard.value = false;
};
const updateValue = (newValue:string) => {
value.value = newValue;
};
</script>
🗺 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 | StyleVlaue | confirm button style | | confirmButtonText | string | confirm button text | | cellTextStyle | StyleVlaue | keycell style | | cellDivStyle | StyleVlaue | keycell style | | defalutConfig | StyleVlaue | expand rules |
📝 License
MIT License