h5自定义输入键盘组件vue+vant

h5自定义键盘组件

效果图

首先在src目录下新建component组件目录，再在目录下新建keyWord目录，目录格式如下

index.vue 代码如下

<template>
  <div>
    <div class="carNumBox">
      <ul v-if="currentVal.length === 0" class="wrp-flex">
        <div class="btn">
          <div @click="cancel" class="right-btn">
            <div class="btn-nabla">
              <img src="@/assets/icon/nabla.png" />
            </div>
          </div>
        </div>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in data"
            v-if="i <= 8"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list "
            v-for="(val, i) in data"
            v-if="8 < i && i <= 16"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in data"
            v-if="16 < i && i <= 24"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in data"
            v-if="24 < i && i <= 31"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <!-- <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in data"
            v-if="31 < i && i <= 37"
            >{
    
    {
    
     val }}</span
          >
        </li> -->
      </ul>
      <ul class="flex-box" v-if="currentVal.length > 0">
        <div class="btn">
          <div @click="cancel" class="right-btn">
            <div class="btn-nabla">
              <img src="@/assets/icon/nabla.png" />
            </div>
          </div>
        </div>
        <li>
          <span
            @click="addList"
            class="list "
            v-for="(val, i) in carNumber"
            v-if="i <= 9"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in carNumber"
            v-if="9 < i && i <= 18"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in carNumber"
            v-if="18 < i && i <= 26"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in carNumber"
            v-if="26 < i && i <= 33"
            >{
    
    {
    
     val }}</span
          >
        </li>
        <li>
          <span
            @click="addList"
            class="list"
            v-for="(val, i) in carNumber"
            v-if="33 < i && i <= 40"
            >{
    
    {
    
     val }}</span
          >
          <span @click="delNum($event)" class="list">
            <van-icon name="clear" size="20" />
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      data: ['京', '沪', '浙', '粤', '苏', '鲁', '晋', '吉', '冀', '豫', '川', '渝', '辽', '黑', '皖', '鄂', '湘', '赣', '闽', '陕', '甘', '宁', '蒙', '津', '桂', '云', '贵', '琼', '青', '新', '藏', '使', '军', '警', '港', '澳', '学', '领', '挂'],
      currentVal: "",
      carNumber: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '领', '港', '澳', '挂', '学']
    };
  },
  // 接受父组件的值
  props: {
    
    },
  watch: {
    
    },
  mounted() {
    
    },

  methods: {
    
    
    // 自定义键盘
    addList(e) {
    
    
      // 大于10位则不能点击
      if (this.currentVal.length >= 10) {
    
    
        return false;
      }
      this.currentVal = this.currentVal.concat(e.currentTarget.innerText);
      // 向父组件传递参数
      this.$emit("addLists", this.currentVal);
    },
    //清除按钮
    delNum() {
    
    
          // this.currentVal = this.currentVal.substr(0, this.currentVal.length - 1);//一位一位的删除
      this.currentVal = "";
      this.$emit("delNum", this.currentVal);
    },
    // 点击向下的取消按钮
    cancel() {
    
    
      this.$emit("cancel", false);
    }
  }
};
</script>
<style lang="scss" scope>
@import "@/style/mixin.scss";
</style>

公共文件样式，scss文件如下

@mixin flex {
    
    
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flexDir($flexDir) {
    
    
  flex-direction: $flexDir;
  -ms-flex-direction: $flexDir;
  -webkit-box-direction: $flexDir;
  -moz-flex-direction: $flexDir;
  -webkit-flex-direction: $flexDir;
}

@mixin alignItem($alignItem) {
    
    
  -webkit-box-align: $alignItem;
  -ms-flex-align: $alignItem;
  -webkit-align-items: $alignItem;
  -moz-flex-align-items: $alignItem;
  align-items: $alignItem;

}

@mixin jusCon($jusCon) {
    
    
  -webkit-box-justify-content: $jusCon;
  -ms-justify-content: $jusCon;
  -webkit-justify-content: $jusCon;
  -moz-justify-content: $jusCon;
  justify-content: $jusCon;
}

@mixin flexWrp {
    
    
  -webkit-box-flex-wrp: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap
}

// 渐变动画
@keyframes mymove {
    
    
  from {
    
    
    opacity: 0;
  }

  to {
    
    
    opacity: 1;
  }
}

@-webkit-keyframes mymove

/*Safari and Chrome*/
  {
    
    
  from {
    
    
    opacity: 0;
  }

  to {
    
    
    opacity: 1;
  }
}


// 键盘样式
.carNumBox {
    
    
  animation: mymove 0.5s;
  -webkit-animation: mymove 0.5s;
  position: fixed;
  width: 100%;
  height: 36%;
  bottom: 0;
  background-color: rgb(39, 228, 149);
  padding: 0.1em 0 0.2em 0;

  // 右上角图标
  .btn {
    
    
    .right-btn {
    
    
      @include flex();
      @include flexDir(row-reverse);
      padding-bottom: 0;

      .btn-nabla {
    
    
        width: 40px;
        height: 30px;
        background-color: white;
        text-align: center;
        border-radius: 5px;
        line-height: 30px;
        margin-right: 10px;

        img {
    
    
          width: 35px;
          height: 30px
        }
      }
    }
  }

  // 键盘1
  .wrp-flex {
    
    
    li {
    
    
      @include flex();
      display: block;
      text-align: center;
      line-height: 1em;
      font-weight: 500;
    }

    .list {
    
    
      font-size: 20px;
      @include flex-item();
    }
  }

  // 键盘2
  .flex-box {
    
    
    li {
    
    
      @include flex();
      display: block;
      text-align: center;
      line-height: 34px;

      span {
    
    
        padding-left: 6px !important;
        padding-right: 6px !important;
      }
    }

    .list {
    
    
      font-size: 0.5em;
      width: 1.2em;
      height: 1.2em;
      padding: 0 0.3em 0 0.3em;
      margin: 0.2em 0.2em 0 0.2em;
      text-align: center;
      border-radius: 4px;
      line-height: 1.0em;
      background-color: #fff;
      box-shadow: 2px 2px 2px 1px #6c6e7c;
    }
  }
}

在组件中使用全局注册在main.js中

import keyword from '@/components/keyword/index.vue'
Vue.component("keyword", keyword);

在页面中使用（使用v-if销毁组件，用v-show无法销毁，返回的时候会有缓存）

template中

 <!-- 键盘组件 -->
              <template>
                <keyword
                  style="position: absolute;bottom:0;left:0"
                  v-if="isShow"
                  @addLists="addList"
                  @delNum="delNum"
                  @cancel="cancel"
                ></keyword>
              </template>

script的methods中

// filed框获得焦点时触发
    focus() {
    
    
      // 隐藏原生键盘
      document.activeElement.blur();
      this.isShow = true;
    },
// 自定义键盘
    // 获取子组件传递的参数
    addList(e) {
    
    
      this.userNo = e;
      // console.log(e);
    },
    // 键盘删除按钮
    delNum(e) {
    
    
      this.userNo = e;
    },
    // 隐藏键盘
    cancel(e) {
    
    
      this.isShow = e;
    },
    // feild失去焦点时触发
    fieldBlur() {
    
    
      this.isShow = false;
    },