vue 移动端 车牌号键盘 输入组件

数字字母.png
省份.png

出参入参

/**
 * @params isShow 控制键盘显示隐藏
 * @prarms oinp   在键盘上显示输入的内容
 * @methods delete 删除按钮触发  this.str = this.str.slice(0, this.str.length-1)
 * @methods ok     确认 按钮触发
 * @methods exit   取消按钮触发
 * @methods inputchange 获取输入的内容
 */

示例

<template>
  <div>
        <button @click=”keyState = true“>键盘</button>
        <keyword :isShow="keyState" @exit="exit" @inputchange="getKey" :oinp="str" @ok="confirm"/>
  </div>
</template>
<script>
  import keyword from '../components/keyword'
    components:{
      keyword
    },
  export default {
    data(){
       return (){
          keyState:false,
          str:""
        }
     },
    methods:{
        exit(){
          this.keyState = false
        },
        getKey(val){
            if (this.str.length >= 8&&val!="delete") {
              return false
            }
            if(val == 'delete'){
              this.str = this.str.slice(0, this.str.length-1)
            }else{
              this.str+=val
            } 
        },
        confirm(e){
          this.keyState = false
        },
    }
  }
</script>

引入方式

第一步：引入组件
import keyword from '../components/keyword'
export default {
    components:{
      keyword
    },
}
第二步：初始化模板
   <keyword :isShow="keyState" @exit="exit" @inputchange="getKey" :oinp="str" @ok="confirm"/>

源码：模板

<template lang="">
    <div>
        

<div class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'>
  <div class="vehicle-panel" :style="{background:backgroundColor}">
      <!-- height:'500rpx'; -->
  <div class='topItem'>
    <span class='check'  @click='check'>中/英</span>
    <span class='contentShow'>{{oinp}}</span>
    <span class='exit' @click='vehicleTap("exit")'>取消</span>
    
  </div>
  <!--省份简写键盘-->
  <div v-if="keyBoardType === 1">
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="idx+item">
        {{item}}
      </div>
       <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
      <img src='../assets/delete.svg' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
    </div>
    </div>
   
    <div class="vehicle-panel-row-last">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" :style="{border:buttonBorder}"
        :key="idx+item">{{item}}</div>
    </div>
  </div>
  <!--英文键盘  -->
  <div v-else>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='vehicleTap(item)'  v-for="(item,idx) in keyNumber" :style="{border:buttonBorder}"
        :key="item+idx">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput1" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput2" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
      <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
        <img src='../assets/delete.svg' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
      </div>
    </div>
    <div class="vehicle-panel-row-last">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput3"
        :key="idx+item">{{item}}</div>
      <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-ok' @click='vehicleTap("ok")' >确定</div>
    </div>
  </div>
</div>
</div>
    </div>
</template>

源码：样式表

:host {
  width: 100%;
}
.panel-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
  background: #fff;
  padding-bottom: 0.68rem;
}
.jik {
  width: 0.6rem;
  height: 0.8rem;
}

.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-button {
  background-color: #fff;
  margin: 0.05rem;
  // padding: 0.05rem;
  width: 0.8rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.1rem;
}
.vehicle-panel-row-button-number {
  background-color: #eee;
}
.vehicle-panel-row-button-last {
  width: 0.9rem;
  height: 0.9rem;
  line-height: 0.9rem;
}
.vehicle-hover {
  background-color: #ccc;
}
.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-en-button-delete {
  width: 0.55rem;
  height: 0.85rem;
}
.vehicle-panel-ok {
  background-color: #6a7cff;
  color: #fff;
  width: 1.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.topItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1rem;
  /* background: #f0f0f0; */
}
.exit {
  margin-right: 0.3rem;
  color: #6a7cff;
  font-size: 0.28rem;
  display: block;
  line-height: 0.5rem;
}
.check {
  margin-left: 0.3rem;
  color: #6a7cff;
  font-size: 0.28rem;
  display: block;
  line-height: 0.5rem;
}

源码：js

export default {
  props:{
    isShow: false,
    oinp: ""
  },
  data() {
    return {
      keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽"],
      keyVehicle2: ["黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣"],
      keyVehicle3: ["鄂", "桂", "甘", "晋", "蒙", "吉", "闽"],
      keyVehicle4: ["粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],
      keyNumber: "1234567890",
      keyEnInput1: "QWERTYUIOP",
      keyEnInput2: "ASDFGHJKL",
      keyEnInput3: "ZXCVBNM",
      backgroundColor: "#fff",
      keyBoardType: 1,
      buttonBorder: "1px solid #ccc"
    };
  },
  methods: {
    vehicleTap: function(event) {
      console.log(event);
      switch (event) {
        case "delete":
          this.$emit("delete");
          this.$emit("inputchange",event);
          break;
        case "ok":
          this.$emit("ok");
          break;
        case "exit":
          this.$emit("exit");
          break;
        default:
          this.$emit("inputchange", event);
      }
    },
    colse_da() {
      this.$emit("exit2");
    },
    check() {
      if (this.keyBoardType == 1) {
        this.keyBoardType = 2;
      } else if (this.keyBoardType == 2) {
        this.keyBoardType = 1;
      }
    }
  }
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,298评论 0赞 3
  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,138评论 1赞 32
  • TED097
    Mr_Oldman阅读 236评论 0赞 0
  • 长大
    小时候的我们总向往长大，想象着不再被考试缠身自己开始工作养活自己的生活，想象着自己穿漂亮的衣服做喜欢的事。不知不觉...
    嘻嘻哈哈Lxx阅读 160评论 0赞 0
  • 2018-09-01
    关注点放在别人身上，太在意细节和小事，忽略了关注自己内在，内耗自己，没有认真去做自己的事，举例婆婆和妈妈的区别。 ...
    duduwa阅读 156评论 0赞 0