[Improvement] Reorganize document (#1066)

2018-05-15 10:39:01 +08:00
parent b1142fd862
commit e8aad7246c
124 changed files with 181 additions and 186 deletions
@@ -0,0 +1,84 @@
+## NumberKeyboard
+
+### Install
+``` javascript
+import { NumberKeyboard } from 'vant';
+
+Vue.use(NumberKeyboard);
+```
+
+### Usage
+
+#### Default Style
+
+```html
+<van-button @touchstart.native.stop="show = true">
+  Show Keyboard
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  extra-key="."
+  close-button-text="Close"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('delete');
+    }
+  }
+}
+```
+
+#### Custom Style
+
+```html
+<van-number-keyboard
+  :show="show"
+  theme="custom"
+  extra-key="."
+  close-button-text="Close"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+### API
+
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-------------|
+| show | Whether to show keyboard | `Boolean` | - |
+| theme | Keyboard theme，can be set to `default` `custom` | `String` | `default` |
+| title | Keyboard title | `String` | - |
+| transition | Whether to show transition animation | `Boolean` | `true` |
+| z-index | Keyboard z-index | `Number` | `100` |
+| extra-key | Content of bottom left key | `String` | `''` |
+| close-button-text | Close button text | `String` | `-` |
+| show-delete-key | Whether to show delete button | `Boolean` | `true` |
+| hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` |
+
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| 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. | - |
@@ -0,0 +1,84 @@
+## NumberKeyboard 数字键盘
+
+### 使用指南
+``` javascript
+import { NumberKeyboard } from 'vant';
+
+Vue.use(NumberKeyboard);
+```
+
+### 代码演示
+
+#### 默认样式
+
+```html
+<van-button @touchstart.native.stop="show = true">
+  弹出默认键盘
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  extra-key="."
+  close-button-text="完成"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('delete');
+    }
+  }
+}
+```
+
+#### 自定义样式
+
+```html
+<van-number-keyboard
+  :show="show"
+  theme="custom"
+  extra-key="."
+  close-button-text="完成"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| show | 是否显示键盘 | `Boolean` | - |
+| theme | 样式风格，可选值为 `default` `custom` | `String` | `default` |
+| title | 键盘标题 | `String` | - |
+| transition | 是否开启过场动画 | `Boolean` | `true` |
+| z-index | 键盘 z-index | `Number` | `100` |
+| extra-key | 左下角按键内容 | `String` | `''` |
+| close-button-text | 关闭按钮文字，空则不展示 | `String` | `-` |
+| show-delete-key | 是否展示删除按钮 | `Boolean` | `true` |
+| hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| input | 点击按键时触发 | key: 按键内容 |
+| delete | 点击删除键时触发 | - |
+| blur | 点击非键盘区域时触发 | - |
+| show | 键盘完全弹出时触发 | - |
+| hide | 键盘完全收起时触发 | - |