# vue-mobile-keyboard

> A Vue mobile continuous input component

Latest version **1.2.8** (published 2019-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-mobile-keyboard
pnpm add vue-mobile-keyboard
yarn add vue-mobile-keyboard
bun add vue-mobile-keyboard
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.8 |
| Published | 2019-03-15 |
| First published | 2018-11-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhiming.yue |
| Maintainers | yuezm |
| Keywords | vue, vue-keyboard, keyboard, keyboard-input |

## Links

- npm: https://www.npmjs.com/package/vue-mobile-keyboard
- npm.io page: https://npm.io/package/vue-mobile-keyboard

## Recent versions

- 1.2.8 (latest) — 2019-03-15
- 1.2.7 — 2019-03-12
- 1.2.6 — 2018-12-27
- 1.2.5 — 2018-12-03
- 1.2.4 — 2018-12-01
- 1.2.3 — 2018-11-28
- 1.2.2 — 2018-11-28
- 1.2.1 — 2018-11-28
- 1.2.0 — 2018-11-27
- 1.1.1 — 2018-11-26
- 1.1.0 — 2018-11-23
- 1.0.2 — 2018-11-15
- 1.0.1 — 2018-11-08
- 1.0.0 — 2018-11-07

## README

# vue-keyboard
vue版的移动端,连续数字输入框

[DEMO](http://47.98.176.169/vue-keyboard/test/)

![avatar](https://img-blog.csdnimg.cn/20190315233250319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NjEzMDcz,size_16,color_FFFFFF,t_70)

### 兼容性

Vue 2.0+
IOS Safari: 6+  
Android Browser: 4+  
Chrome for Android: 71  
Firefox for Android: 64  
UC Browser for Android: 11.8  

### 如何使用

> 在vue单页面中使用

##### 全局导入
```
// main.js

import mobileInput from "vue-mobile-keyboard";

Vue.use(mobileInput);

// demo.vue

<template>
  <NumberList v-model="data"/>
</template>

export default {
  data() {
    return {
      data: '',
    }
  }
}
```
##### 按需加载
```
// demo.vue

<template>
  <NumberList v-model="data"/>
</template>

<script>
import { NumberList } from "vue-mobile-keyboard";

export default {
  name: 'app',
  components: {
    NumberList,
  },
  data() {
    return {
      data: '',
    }
  }
}
```
> 在非vue单页面中使用
```
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="[vue-mobile-keyboard.path]/dist/build.js "></script>
  ...
  <div id="app">
    <number-list v-model="data" :length="6" @finish="finish"></number-list>
  </div>
    <script>
      new Vue({
        el: '#app',
        data:{
          data: '',
        },
        methods: {
          finish(v) {
            alert('输入完毕，输入为:' + v);
          }
        }
      });
    </script>
  ...
```

### 组件参数
|参数|类型|是否必传|说明|
|--|--|--|--|
|length|Number|false|输入框的个数,最小为1,最大为8,默认6|
|type|String|false|输入框类型, enum[ 'text', 'number', 'tel' ],默认text|
|isInitFocus|Boolean|false|是否自动获取焦点(在IOS无法使用),默认false|
|value|String|false|父组件传给子组件的值,父组件使用v-model时,会自动传入该值|
|isSecret|Boolean|false|是否加密显示,默认false|
|rule|RegExp|false|输入框输入值的校验|
|entireRule|RegExp|false|输入框整体校验|

### 组件事件
|时间名称|回调参数|说明|
|--|--|--|
|finish|v: 用户输入的值|当用户完成输入触发|

---
_Source: https://npm.io/package/vue-mobile-keyboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._