vant/docs/examples-docs/en-US/number-keyboard.md
neverland 9084a662c3 [Document] add form components english document (#199)
* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases
2017-10-12 07:06:27 -05:00

94 lines
1.8 KiB
Markdown

<script>
import { Toast } from 'packages';
export default {
data() {
return {
showKeyboard: true
}
},
methods: {
onInput(value) {
Toast('Input: ' + value);
},
onDelete() {
Toast('Delete');
}
}
}
</script>
## NumberKeyboard
### Install
``` javascript
import { NumberKeyboard } from 'vant';
Vue.component(NumberKeyboard.name, NumberKeyboard);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-button @touchstart.native.stop="showKeyboard = true">
ShowKeyboard
</van-button>
<van-button @touchstart.native.stop="showKeyboard = false">
HideKeyboard
</van-button>
<van-number-keyboard
:show="showKeyboard"
@blur="showKeyboard = false"
@input="onInput"
@delete="onDelete"
/>
```
```javascript
export default {
data() {
return {
showKeyboard: true
}
},
methods: {
onInput(value) {
Toast(value);
},
onDelete() {
Toast('delete');
}
}
}
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| show | Whether to show keyboard | `Boolean` | - | - |
| title | Keyboard title | `String` | - | - |
| extraKey | Content of bottom left key | `String` | `''` | - |
| zIndex | Keyboard z-index | `Number` | `100` | - |
| transition | Whether to show transition animation | `Boolean` | `true` | - |
| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| input | Triggered when keydown | key: Content of the key |
| delete | Triggered when press delete key | - |
| blur | Triggered when blur keyboard | - |
| show | Triggered when keyboard is fully displayed. | - |
| hide | Triggered when keyboard is fully hidden. | - |