vue自定义keyBoard组件(桌面端)

vue num-keyboard桌面端键盘组件

electron+element+vue 使用自定义键盘

网上找了很多,好像都不是很适用.所以自己撸了一个自定义键盘组件,记下来一是怕自己忘记,二是分享给同样需要的小伙伴

组件: components=>mi-keyboard

/**
 * <mi-keyboard
    v-if="keyboardShow"
    :in="prd[activeKey] || 0"
    @num_back="numBack"
    @enter="keyConfirm"
    @esc="escKeyboard"
    ></mi-keyboard>
 * keyboardShow 控制组件隐藏/显示 (需要控制隐藏/显示来注册对应的键盘事件)
 * in 入参
 * num_back 出参(方法)
 * enter 键盘 enter 键返回
 * esc 键盘 esc 键返回 (返回值为初始值,请在使用页面保存)
 * 
<el-input v-model="prd.off" @input="checkOff" :autocomplete="false"
    @focus="showKeyBoard('off')"
    :class="activeKey==='off'?'is-active off':'off'" // (is_active) 选中边框加颜色区别
    :readonly="true"
>
    <template slot="append">
        <span v-text="'%'"></span>
    </template>
</el-input>


// 点击展示输入键盘
showKeyBoard(e) {
    this.activeKey = e
    this.keyboardShow = true
    // 移除input的聚焦
    document.querySelector('.' + e + ' > input').blur()
},
// 键盘输入返回
numBack(e) {
    console.log(e)
    this.prd[this.activeKey] = e
},
// 确认关闭键盘
keyConfirm() {
    this.activeKey = ''
    this.height = 45
    this.keyboardShow = false
},
// 取消键盘录入
escKeyboard() {
    this.prd[this.activeKey] = this.oldNum
    this.oldNum = 0
    this.activeKey = ''
    this.keyboardShow = false
},
 */
Vue.component('mi-keyboard', {
    props: [
        'in'
    ],
    data: function () {
        return {
            name: 'mi-keyboard',
            _title: 'default',
            keys: [
                '1', '2', '3', '4', '5', '6', '7', '8', '9', '00', '0', '.'
            ],
        }
    },
    methods: {
        // 确定
        handleConfirm() {
            this.$emit('enter', null)
        },
        // 删除
        back() {
            const oldNum = this.in
            const backNum = refundNumber(oldNum, 10)
            this.$emit('num_back', backNum)
        },
        // 清空
        del() {
            this.$emit('num_back', 0)
        },
        // 点击数字输入
        numbs(e) {
            const oldNum = this.in
            const newNum = determineDecimal(e)
            this.backNum(oldNum, newNum)
        },
        // 返回
        backNum(oldNum, newNum) {
            let backNum = Modifycomputer(oldNum, newNum)
            backNum = determineDecimal(backNum)
            this.$emit('num_back', backNum)
        },
    },
    created: function () {
        Keyset.Active(this.name);
        this._title = !isUndefined(this.title) ? this.title : ''
    },

    mounted: function () {
        Keyset.Bind('esc', this.name, e => {
            this.$emit('esc', this.in)
        })
        Keyset.Bind('enter', this.name, e => {
            this.$emit('enter', this.in)
        })
        Keyset.Bind('backspace', this.name, e => {
            this.back()
        })
        Keyset.Bind('del', this.name, e => {
            this.del()
        })
        const numArr = this.keys
        numArr.map(key => {
            Keyset.Bind(key, this.name, e => {
                this.numbs(key)
            })
        })

    },
    destroyed: function () {
        Keyset.Unactive('esc', this.name)
        Keyset.Unactive('enter', this.name)
        Keyset.Unactive('del', this.name)
        Keyset.Unactive('backspace', this.name)
        const numArr = this.keys
        numArr.map(key => {
            Keyset.Unactive(key, this.name)
        })
    },
    template: `
        <div class="bottom-esc_btn">
            <div class="esc-btn_li">
                <div @click="numbs(item)" v-for="item in keys" v-text="item"></div>
            </div>
            <div class="esc-btn_lis">
                <ul>
                    <li @click="back">X</li>
                    <li @click="del">清除</br>Delete</li>
                    <li @click="handleConfirm">确定 Enter</li>
                </ul>
            </div>
        </div>
    `
});

css: 这里是我们新来的实习生写的,自己懒得改了. 觉得不好看的勿喷

.bottom-esc_btn {
    width: 100%;
    display: flex;
    margin-top: 20px;
}
.esc-btn_li {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
}

.esc-btn_li div:active,
.esc-btn_lis li:nth-child(1):active {
    background: #5aa7ee;
}

.esc-btn_li div {
    font-size: 15px;
    margin: 0 8px 8px 0;
    line-height: 60px;
    width: 30%;
    height: 60px;
    background: #efeff4;
    text-align: center;
}

.esc-btn_lis {
    width: 20%;
}

.esc-btn_lis li:nth-child(1) {
    width: 100%;
    background: #ffc168;
    height: 60px;
    margin-bottom: 8px;
    text-align: center;
    padding: 6px 0 0 0;
}

.esc-btn_lis li:nth-child(2) {
    width: 100%;
    background: #efeff4;
    height: 60px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 15px;
    line-height: 26px;
}

.esc-btn_lis li:nth-child(3) {
    width: 100%;
    background: #1890ff;
    height: 128px;
    text-align: center;
    font-size: 15px;
    line-height: 117px;
}

.hand {
    cursor: pointer;
}

 

外部js:

　　1. 键盘事件

// 键盘事件绑定处理，目前只支持一个模块里，一个键只执行最后一个绑定
/**
 *    
 *  全局定义
    Keyset.Bind("up", e => {
      console.log(e,this);
    });
    Keyset.Once("down", e => {
        console.log(e,this);
      });
     模块定义
    Keyset.Bind("esc", "login", e => {
      console.loge;
    });
 */
const Keyset = {
  map: {},
  modules: [],
  callback: function (e, m) {
    if (isObject(m)) {
      const cb = m.callback;
      const cp = m.option;
      const oc = m.once;
      if (isFunction(cb)) cb(e, cp);
      if (oc) {
        m.callback = undefined;
      }
    }
  },
  func: function (key) {
    return e => {
      const m = window._activeModule;
      if (!isUndefined(this.map[key])) {
        if (!isUndefined(this.map[key][m])) {
          this.callback(e, this.map[key][m]);
        }
        if (!isUndefined(this.map[key]["$"])) {
          this.callback(e, this.map[key]["$"]);
        }
      }
    };
  },
  Active: function (module) {
    window._activeModule = module;
    this.modules.push(module);
  },
  // leo 20210827
  Unactive: function (key, module) {
    const pos = this.modules.findIndex(res => res === module)
    if (pos === -1) return;
    if (pos > 0) {
      this.modules = this.modules.filter((res, idx) => idx < pos);
      window._activeModule = this.modules[pos - 1];
    } else {
      window._activeModule = '$_';
      this.modules = [];
    }
    this.Unbind(key, module);
  },
  // 可反复执行
  Bind: function (key, module, callback, option) {
    if (isFunction(module)) {
      option = callback;
      callback = module;
      module = "$";
    }
    if (isUndefined(this.map[key])) {
      this.map[key] = {};
      Mousetrap.bind(key, this.func(key));
    }
    this.map[key][module] = {
      callback,
      option,
    };
  },
  //只会执行一次
  Once: function (key, module, callback, option) {
    if (isFunction(module)) {
      option = callback;
      callback = module;
      module = "$";
    }
    if (isUndefined(this.map[key])) {
      this.map[key] = {};
      Mousetrap.bind(key, this.func(key));
    }
    this.map[key][module] = {
      callback,
      option,
      once: true,
    };
  },
  // 取消息
  Unbind: function (key, module) {
    if (!isUndefined(this.map[key])) {
      if (!isUndefined(this.map[key][module])) {
        this.map[key][module] = undefined;
      }
    }
  },
};

 　　2.数字处理方法

// 去掉第一位的0或者.,
const firstCharacter = value => {
    value = value.toString();
    if (value.length > 1) {
        while ((value.charAt(0) == '0' && value.charAt(1) != '.') || value.charAt(0) == '.') {
            value = value.substring(1, value.length);
        }

    } else {
        value = value;
    }
    return value;
}
const determineDecimal = (value) => {

    value = value.toString();
    // 判断刚开始是不是0开头的小数
    if (value.charAt(0) == '0' && value.charAt(1) == '.' && value.charAt(2) != '.') {
        value = value;
    } else {
        value = firstCharacter(value);
    }
    return value;
}
// 判断是不是多次输入‘.’，没有就正常加入
const Modifycomputer = (value, val) => {
    // if(val!='.' || val != '00' || val != '0' ){
    //   val=num_multiply(val,10000)
    // }
    // value = num_multiply(value + val,10000);
    value = value.toString();
    val = val.toString();
    value = value + val;
    let nums = 0;
    for (let idx = 0; idx < value.length; idx++) {
        if (value[idx] == '.') {
            nums = nums + 1;
        }
    }
    if (nums > 1) {
        value = value.substring(0, value.length - 1);
    }
    return value;
}
// 退货退款的计算器页面清除最后一位
const refundNumber = (value, val) => {
    value = value.toString();
    if (Number(val) === 10) {
        if (value.length == 1) {
            value = 0;
        } else {
            value = value.substring(0, value.length - 1);
        }
    } else {
        value = value + val;
    }

    return value
}

使用方式写到组件中...