Awesome

A vehicle license plate number keyboard

demo image

Requirements

Vue.js 2.x

Quik Start

clone or download

$ git clone git@github.com:yimocanxue/vue-car-plate-keyboard.git

install dependencies

$ cd vue-car-plate-keyboard
$ npm install

run and open browser with http://0.0.0.0:8080

$ npm run dev

Install

NPM

$ npm install vue-car-plate-keyboard -D

Usage

import first, then call Vue.use() before new Vue instance

import Vue from 'vue';
import VueCarPlateKeyboard from './lib/index';

Vue.config.productionTip = false;
Vue.use(VueCarPlateKeyboard);
new Vue({
    el: '#app',
    data: function () {
    },
    methods: {
        tapedKey (data) {
            console.log(data);
        },
        tapedBox (data) {
            console.log(data);
        },
        tapedDel (data) {
            console.log(data);
        },
        tapedOk (data) {
            console.log(data);
        } 
    }
})

use directive in HTML file

<div id="app">
  <car-plate-keyboard 
      car-number="苏E55552学"
      active-color="#ff0000"
      ok-btn-text="关闭"
      v-on:tap-key="tapedKey"
      v-on:tap-box="tapedBox"
      v-on:tap-del="tapedDel"
      v-on:tap-ok="tapedOk"
   ></car-plate-keyboard>
</div>

Props

Props Name	Type's	Default	Description
car-number	String	''	car plate number initial value
active-color	String	'#1a84e7'	input box active color，keyboard tap hover color etc.
ok-btn-text	String	'确定'	text of ok button

Custom Events

Event Name	Parameter	Description
tap-key	{key: '5', keyIndex: 6, value: '苏E12345', valid: true}	emit when taped keyboard
tap-box	{keyIndex: 0, value: '苏', valid: false}	emit when taped input box
tap-del	{keyIndex: 6, value: '苏E1234' , valid: false}	emit when taped delete button
tap-ok	{value: '苏E12345', valid: true}	emit when taped ok button

keys of Paremeter means:

key: current input character.

keyIndex: current edit(taped/input/delete) key index(from 0 to 7).

value: current car plate number.

valid： validity of current car plate number(true of false).

Contributions

Any contribution to the code (via pull request would be nice) or any part of the documentation and any idea and/or suggestion are very welcome.

Note For any bug fix, the PR should be forked from the master branch. And for any suggestion or additional feature, the PR should be forked from the develop branch, where it can be integrated and rolled out in the next release.

If you are not sure, please ask by openning a new issue.

However, please do not feel bad if your pull requests or contributions do not get merged or implemented into vue-car-plate-keyboard.

Your contributions can, not only help make vue-car-plate-keyboard better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.

License

vue-car-plate-keyboard is open-sourced software licensed under the MIT license.