VueTouchKeyboard——一个模拟键盘

功能需求：封装一个带有设计好的样式的输入组件，输入方式为模拟的数字键盘。

键盘组件为VueTouchKeyboard,下载方式如下

npm install "vue-touch-keyboard" --save

 

image.png

封装的输入组件

模板

<template>
  <div v-clickoutside="hide">
    <input v-bind="$attrs"
           @focus="show"
           @blur="submit" />
    <div class="keyboard__warn-mess keyboard__warn">
      <div v-if=warnMessage
           class="">
        {{warnMessage}}
      </div>

    </div>
    <vue-touch-keyboard class="keyboard-nav"
                        :options="options"
                        v-if="visible"
                        :cancel="hide"
                        :layout="layout"
                        :accept="hide"
                        :input="input" />
  </div>
</template>

很简单，就包含了一个VueTouchKeyboard模拟键盘和input输入框，以及一个div里放动态的warnMessage
js内容：

<script>
import VueTouchKeyboard from 'vue-touch-keyboard';
import 'vue-touch-keyboard/dist/vue-touch-keyboard.css';
import $ from 'jquery';

const clickoutside = {//自定义命令，功能：点击键盘以外的区域隐藏键盘
  // 初始化指令

  bind (el, binding, vnode) {
    function documentHandler (e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update () { },
  unbind (el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};

export default {
  components: {
    'vue-touch-keyboard': VueTouchKeyboard.component,
  },
  directives: { clickoutside },
  data: function () {
    return {
      visible: false,
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      }
    };
  },
  props: {
    warnMessage: { type: String, default: null },//错误提示
    layout: { type: String, default: 'normal' },//键盘的种类：normal:全键盘/numeric：数字/compact：字母
    instanceID: String,
  },
  methods: {
    accept () {
      this.hide();
    },

    show (e) {
      this.input = e.target;
      if (!this.visible) { this.visible = true }

    },
    hide () {
      this.visible = false;
    },
    submit () {
      if (this.input === null) {
        return;
      }
      this.$emit('data-change', this.input.value);
    },
  },
  watch: {
    warnMessage: {
      handler () {
        // debugger;
        const doubleId = `#${this.instanceID}`;
        if (this.warnMessage !== '' && this.warnMessage != null) {
          $(doubleId).find('input').css('border', '1px solid rgba(255, 0, 90, 1)');
        } else {
          $(doubleId).find('input').css('border', 'none');
        }
      },
    },
  },
}
</script>

页面内容(只简单的展示了下组件的使用)

<template>
  <div>
    <div class="display-flex-css">
      <span class="keyboard-lable">{{$t('messages.order_no')}}</span>
      <touch-keyboard type="number"
                      id="order-no-K"
                      :placeholder="$t('messages.pls_input_orderno')"
                      :maxlength="13"
                      v-model="orderno"
                      instanceID="order-no-K"
                      :warnMessage="ordernoWarn"
                      @data-change="getOrderNo"
                      layout="numeric"></touch-keyboard>
    </div>
    <div class="display-flex-css">
      <span class="keyboard-lable">{{$t('messages.phoneNum')}}</span>
      <touch-keyboard type="number"
                      id="phone-num-K"
                      :placeholder="$t('messages.pls_input_phoneNum')"
                      :maxlength="11"
                      v-model="phoneNum"
                      instanceID="phone-num-K"
                      :warnMessage="phoneNumWarn"
                      @data-change="getPhoneNum"
                      layout="numeric"></touch-keyboard>
    </div>
    <button class="confirm-btn"
            @click="confirm">确定</button>
  </div>
</template>

<script>
import touchKeyboard from '@/components/keyboard';

export default {
  components: {
    'touch-keyboard': touchKeyboard,
  },
  data () {
    return {
      orderno: '',
      ordernoWarn: '',
      phoneNum: '',
      phoneNumWarn: ''
    }
  },
  methods: {
    getOrderNo (value) {
      this.orderno = value;
    },
    getPhoneNum (value) {
      this.phoneNum = value;
    },
    confirm () {
      this.ordernoWarn = "";
      this.phoneNumWarn = "";
      if (this.orderno == "") {
        this.ordernoWarn = "订单号不能为空";
      } else if (this.phoneNumWarn == "") {
        this.phoneNumWarn = "手机号不能为空";
      }
    }
  }
}
</script>
<style lang="scss">
.display-flex-css {
  display: flex;
  justify-content: center;
}
.keyboard-lable {
  font-size: 22px;
  padding-right: 26px;
  line-height: 46px;
}
.confirm-btn {
  width: 150px;
  height: 43px;
  font-size: 21px;
  border-radius: 8px;
  background: #9800ff29;
  border: 0px;
  margin-top: 17%;
}
</style>

页面效果：（随便画的，比较丑）

 

 

 

 

 

 

可参考https://www.npmjs.com/package/vue-touch-keyboard