alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(NumberKeyboard): use delete icon instead of delete text (#6151)

Browse Source
This commit is contained in:
neverland
2020-04-27 19:14:44 +08:00
committed by GitHub
parent 3360ca7eb0
commit 9e7d72eff2
10 changed files with 464 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/number-keyboard/README.md
+48 -52
View File
@@ -11,16 +11,14 @@ Vue.use(NumberKeyboard);
## Usage
### Default Style
### Default Keyboard
```html
<van-button @touchstart.stop="show = true">
<van-cell @touchstart.native.stop="show = true">
Show Keyboard
</van-button>
</van-cell>
<van-number-keyboard
:show="show"
extra-key="."
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
@@ -47,7 +45,7 @@ export default {
};
```
### Custom Style
### Keyboard With Sidebar
```html
<van-number-keyboard
@@ -61,6 +59,44 @@ export default {
/>
```
### IdNumber Keyboard
Use `extra-key` prop to set the content of bottom left button
```html
<van-cell plain type="primary" @touchstart.native.stop="show = true">
Show IdNumber Keyboard
</van-cell>
<van-number-keyboard
:show="show"
extra-key="X"
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### Keyboard With Title
Use `title` prop to set keyboard title
```html
<van-cell plain type="info" @touchstart.native.stop="show = true">
Show Keyboard With Title
</van-cell>
<van-number-keyboard
:show="show"
title="Keyboard Title"
extra-key="."
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### Bind Value
```html
@@ -70,7 +106,6 @@ export default {
:value="value"
@touchstart.native.stop="show = true"
/>
<van-number-keyboard
v-model="value"
:show="show"
@@ -90,61 +125,22 @@ export default {
};
```
### Bottom Left Button Content
Use `extra-key` prop to set the content of bottom left button
```html
<van-button plain type="primary" @touchstart.stop="show = true">
Show Id Card Number Keyboard
</van-button>
<van-number-keyboard
:show="show"
close-button-text="Close"
extra-key="X"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### Keyboard Title
Use `title` prop to set keyboard title
```html
<van-button plain type="info" @touchstart.stop="show = true">
Show Custom Title Keyboard
</van-button>
<van-number-keyboard
:show="show"
close-button-text="Close"
title="Keyboard Title"
extra-key="."
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model `v2.0.2` | Current value | _string_ | - |
| v-model (value) `v2.0.2` | Current value | _string_ | - |
| show | Whether to show keyboard | _boolean_ | - |
| theme | Keyboard theme，can be set to `default` `custom` | _string_ | `default` |
| theme | Keyboard theme，can be set to `custom` | _string_ | `default` |
| title | Keyboard title | _string_ | - |
| maxlength `v2.0.2` | Value maxlength | _number \| string_ | - |
| transition | Whether to show transition animation | _boolean_ | `true` |
| z-index | Keyboard z-index | _number \| string_ | `100` |
| extra-key | Content of bottom left key | _string_ | `''` |
| close-button-text | Close button text | _string_ | `-` |
| delete-button-text | Delete button text | _string_ | `delete` |
| close-button-text | Close button text | _string_ | - |
| delete-button-text | Delete button text | _string_ | Delete Icon |
| show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` |
| hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
@@ -157,8 +153,8 @@ Use `title` prop to set keyboard title
| delete | Triggered when press delete key | - |
| close | Triggered when click close button | - |
| blur | Triggered when click close button or blur keyboard | - |
| show | Triggered when keyboard is fully displayed. | - |
| hide | Triggered when keyboard is fully hidden. | - |
| show | Triggered when keyboard is fully displayed | - |
| hide | Triggered when keyboard is fully hidden | - |
### Slots