[new feature] NumberKeyboard add custom theme (#472)

This commit is contained in:
neverland
2017-12-22 16:29:21 +08:00
committed by GitHub
parent 57abc04346
commit 9e6b663145
7 changed files with 259 additions and 97 deletions
+16 -1
View File
@@ -9,7 +9,7 @@ Vue.use(NumberKeyboard);
### Usage
#### Basic Usage
#### Default Style
```html
<van-button @touchstart.native.stop="showKeyboard = true">
@@ -45,11 +45,26 @@ export default {
}
```
#### Custom Style
```html
<van-number-keyboard
theme="custom"
extraKey="."
:show="showKeyboard"
closeButtonText="Close"
@blur="showKeyboard = false"
@input="onInput"
@delete="onDelete"
/>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| show | Whether to show keyboard | `Boolean` | - | - |
| theme | Keyboard theme | `String` | `Default` | `Custom` |
| title | Keyboard title | `String` | - | - |
| zIndex | Keyboard z-index | `Number` | `100` | - |
| extraKey | Content of bottom left key | `String` | `''` | - |
+17 -2
View File
@@ -9,11 +9,11 @@ Vue.use(NumberKeyboard);
### 代码演示
#### 基础用法
#### 默认样式
```html
<van-button @touchstart.native.stop="showKeyboard = true">
弹出键盘
弹出默认键盘
</van-button>
<van-number-keyboard
@@ -45,11 +45,26 @@ export default {
}
```
#### 自定义样式
```html
<van-number-keyboard
theme="custom"
extraKey="."
:show="showKeyboard"
closeButtonText="完成"
@blur="showKeyboard = false"
@input="onInput"
@delete="onDelete"
/>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| show | 是否显示键盘 | `Boolean` | - | - |
| theme | 键盘样式风格 | `String` | `Default` | `Custom` |
| title | 键盘标题 | `String` | - | - |
| zIndex | 键盘 z-index | `Number` | `100` | - |
| extraKey | 左下角按键内容 | `String` | `''` | - |