keyboard自定义键盘

keyboard

<template>
 <div class="key-box clearfix user-no-select">
   <div class="key-body">
     <div class="key-left">
       <span @click="keyIn(1)">1</span>
       <span @click="keyIn(2)">2</span>
       <span @click="keyIn(3)">3</span>
       <span @click="keyIn(4)">4</span>
       <span @click="keyIn(5)">5</span>
       <span @click="keyIn(6)">6</span>
       <span @click="keyIn(7)">7</span>
       <span @click="keyIn(8)">8</span>
       <span @click="keyIn(9)">9</span>
       <span class="key-min" @click="keyIn('m')"></span>
       <span @click="keyIn(0)">0</span>
       <span class="key-dot" @click="keyIn('.')">.</span>
     </div>
     <div class="key-right">
       <span class="key-delete" @click="keyIn('d')"></span>
       <div class="key-enter" @click="keyIn('e')"><span>确认</span></div>
     </div>
   </div>
 </div>
</template>
<style lang="less" scoped>
 .key-box{
   .key-body{
     >div>span{
       height:46px;
       line-height: 46px;
       text-align: center;
       float: left;
       margin-bottom: 7px;
       background-color:#fcfcfe;
       border-radius: 5px ;
       margin-right: 6px;
       font-size:25px;
       color:#5A4B41;
     }
     .key-min, .key-dot{
       background-color: inherit;
     }
     .key-min{
       background: url('../../assets/img/key-min.png') no-repeat center;
     }
     .key-delete{
       background:#fcfcfe url('../../assets/img/key-delete.png') no-repeat center;
     }
     .key-enter{
       >span{
         width:20px;
         margin-top: 53px;
         color:#fff;
         display: inline-block;
       }
       height:154px;
       float: left;
       text-align: center;
       font-size: 18px;
       background-color: #F6A54D;
     }
     .key-left{
       float: left;
     }
     .key-right{
       float: left;
     }
   }
   width:100%;
   height:219px;
   padding:7px 0 0 6px;
   background:rgba(231,235,239,1);
 }
</style>
<script>
 export default {
   data () {
     return {
       width: null
     }
   },
   mounted () {
     this.init()
     $(window).on('resize', this.init)
   },
   methods: {
     /**
      * 键盘输入
      * */
     keyIn (k) {
       this.$emit('keyIn', k)
     },
     /**
      * 初始化键盘样式
      * */
     init () {
       this.width=$(document.body).width();
       let w = (this.width - 30)/4
       $('.key-left').width(w * 3 + 18 + 'px')
       $('.key-right').width(w + 6 + 'px')
       $('.key-body>div>span').width(w + 'px')
       $('.key-enter').width(w + 'px')
     }
   },
   components: {},
   beforeDestroy () {
     $(window).off('resize', this.init)
   }
 }
</script>

use-keyboard

<template>
    <div v-transfer-dom :id="id">
      <popup v-model="showKey" :show-mask="!hideMask" :style="{'z-index': zIndex}" style="position:absolute;overflow-y: visible;background:rgba(231,235,239,1);">
        <slot></slot>
        <key-body @keyIn="keyIn"></key-body>
      </popup>
    </div>
</template>
<style lang="less" scoped>
</style>
<script>
  import {Popup, TransferDomDirective as TransferDom} from 'vux'
  import keyBody from '../common/keybody.vue'
  export default {
    props: [
      'value',
      'decLength', // 小数点后有几位
      'initResult', // 初始值
      'hideMask', // 是否有遮罩层
      'hasDec', // 是否有小数点
      'canMin', // 是否可以最小化
      'maxLength', // 可以输入最大长度
    ],
    data () {
      return {
        id: 'keyboard' + new Date().getTime(),
        showKey: false,
        zIndex: 9999
      }
    },
    watch:{
      'value':function(){
        if(this.value) {
          this.showKey=true;
        }
        else this.showKey=false;
      },
      'showKey':function(){
        if(!this.showKey) this.$emit('input',false)
      }
    },
    mounted () {
      this.showKey=this.value;
      if (this.$route.matched.length > 1) {
        this.zIndex = 999999
      }
    },
    directives: {
      TransferDom
    },
    methods: {
      /**
       * 键盘输入
       * */
      keyIn (k) {
        let result = this.initResult || ''
        if (k == 'e') {
          this.$emit('done')
        }
        else if (k == 'm') {
          if (this.canMin) this.$emit('input',false)
        } else if (k == '.') {
          if (this.hasDec && result.indexOf('.') === -1 && result.length < (this.maxLength || 14)) {
            result += k
            this.$emit('result', result)
          } else return
        } else if (k == 'd') {
          result = result.slice(0, -1)
          this.$emit('result', result)
        } else {
          if (result.length >= (this.maxLength || 14) || (result.indexOf('.') != -1 && (result.length - result.indexOf('.') - 1) > 1)) return
          result += k
          this.$emit('result', result)
        }
      }
    },
    beforeDestroy () {
      this.$el && this.$el.parentNode.removeChild(this.$el)
    },
    components: {
      Popup,
      keyBody
    }
  }
</script>

全局组件

// index.js

import keyboard from './keyboard.vue'

export default {
  install:function (Vue) {
    Vue.component('keyboard', keyboard)
  }
};


// main.js
import Keyboard from './components/keyboard'
Vue.use(Keyboard)