# @gauseen/keyboard-for-vue

> virtual keyboard for vue

Latest version **0.3.0** (published 2019-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gauseen/keyboard-for-vue
pnpm add @gauseen/keyboard-for-vue
yarn add @gauseen/keyboard-for-vue
bun add @gauseen/keyboard-for-vue
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2019-04-03 |
| First published | 2019-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 554.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | gauseen |
| Maintainers | gauseen |
| Keywords | vue, virtual, keyboard |

## Links

- npm: https://www.npmjs.com/package/@gauseen/keyboard-for-vue
- Repository: https://github.com/gauseen/keyboard-for-vue
- Homepage: https://github.com/gauseen/keyboard-for-vue#readme
- Issues: https://github.com/gauseen/keyboard-for-vue/issues
- npm.io page: https://npm.io/package/@gauseen/keyboard-for-vue

## Recent versions

- 0.3.0 (latest) — 2019-04-03
- 0.2.0 — 2019-04-03
- 0.1.0 — 2019-04-03

## README

## virtual keyboard for vue

### 预览
[Demo Live](https://gauseen.github.io/keyboard-for-vue/#/)

### 特性
- 轻量、无其他依赖
- 支持电脑原生键盘和 `virtual keyboard` 同时使用
- 自定义布局、样式

### 使用
```sh
# 安装
yarn add @gauseen/keyboard-for-vue
# OR
npm i -S @gauseen/keyboard-for-vue
```

#### ESM 引入
```js
// main.js
import Vue from 'vue'
import KeyboardForVue from '@gauseen/keyboard-for-vue'

Vue.use(KeyboardForVue)
```

#### 浏览器脚本引入
```html
<link rel="stylesheet" href="https://unpkg.com/@gauseen/keyboard-for-vue/dist/keyboardForVue.css">

<script src="https://unpkg.com/@gauseen/keyboard-for-vue"></script>
```

#### Demo
```html
<template>
  <div class="demo">
    <form>
      <fieldset>
        <legend>keyboard for vue:</legend>
        Name: <input v-model="name" @focus="onFocus" autofocus type="text">
        <p>{{name}}</p>

        Email: <input v-model="email" @focus="onFocus" type="text"><br>
        <p>{{email}}</p>

        Money: <input v-model="money" @focus="onFocus" type="text"><br>
        <p>{{money}}</p>

        <div>
          Switch style:
          <input type="radio" id="normal" value="normal" v-model="keyboardStyle">
          <label for="normal">normal</label>
          <input type="radio" id="number" value="number" v-model="keyboardStyle">
          <label for="number">number</label> &nbsp;
          <button @click.prevent="handleClear"> Clear </button>
        </div>
      </fieldset>
    </form>
    <keyboard-for-vue
      :input="input"
      :is-show.sync="isShow"
      :keyboard-style="keyboardStyle"
      @on-close="handleClosed"
    >
    </keyboard-for-vue>
  </div>
</template>
```
```html
<script>
export default {
  name: 'Demo',
  data () {
    return {
      keyboardStyle: 'normal',
      isShow: false,
      input: null,
      name: 'gauseen',
      email: '',
      money: ''
    }
  },
  methods: {
    onFocus (e) {
      this.input = e.target
      this.isShow = true
    },
    handleClear (e) {
      this.name = ''
      this.email = ''
      this.money = ''
      this.isShow = false
    },
    handleClosed (value) {
      window.alert(value)
    }
  }
}
</script>
```


### 属性
| 属性 | 类型 | 说明 | 默认参数 | 可选值 | 必填？ |
|-------|-------|---------|-------|-------|-------|
| `input` | `HTMLInputElement` | 键盘将要输入的 `input DOM` 对象 | - | `input DOM` | 否 |
| `is-show.sync` | `Boolean` | 虚拟键盘是否显示 | `false` | `true、false` | 否 |
| `keyboard-style` | `String` | 虚拟键盘是否显示 | `normal` | `normal、number` | 否 |
| `font-color` | `String` | 键盘字体颜色 | `#fff` | - | 否 |
| `line-style-height` | `String` | 每个键的高度 | `60px` | - | 否 |
| `key-style-bg-color` | `String` | 每个键背景色 | `#5b6878` | - | 否 |

### 方法
| 方法 | 说明 | 回调参数 |
|-------|-------|---------|
| `on-close` | 键盘消失时回调 | `function(inputValue)` |

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