vue - 自定义数字键盘组件的封装

  最近做的一个项目需要自己写一个自定义键盘，所以我这里简单的封装了一下自定义数字键盘。

github地址：https://github.com/sunshime/comPackage

效果图：

（ps：这里演示的键盘只允许输入6位数）

1、封装的组件：

（1）html文件

<template>
    <div class="cuskeyboard" :style="cssStyle">
        <div class="keyboardcon">
            <div class="number">
                <div
		          :class="active==index?'numberitem changecolor':'numberitem'"
		          v-for="(item,index) in lists"
		          :key="index"
		          @click="choosekey(item,index)"
		        >
		         	 <span :class="index==lists.length-1?'numspan textspan':'numspan'">{
  {item.label}}</span>
		        </div>
            </div>
            <div class="operate">
                 <div :class="active==-1?'operateitem changecolor':'operateitem'" @click="rebacking">
                    <span class="raback"></span>
                </div>
                <div class="operateitem sureitem" @click="makesure">
                    <span class="flexcenter">下一步</span>
                </div>
            </div>
        </div