基于iview的网页端弹窗小键盘

开始

最近在为医院自助机做报告打印服务,因为自带的键盘交互不太友好,网上的小键盘大多数都是适配手机端的(也可能是我找的不够仔细),索性就自己用iview(只是是用了Modal组件,如有需要可以替换成自己常用的组件)写了一个,没有什么技术含量,只是作为记录跟交流.

代码

html部分

  <div class="inputmodal">
    <Modal 
      v-model="modalView"
      :width="modalWidth"
      :title="modaltitle"
    >
    <div class="number_keyboard">
      <div class="number_keyboard-input">
        <span>{{pat_id}}</span>
      </div>
      <div class="number_keyboard-numbers">
        <div class="number_keyboard-numbers-left">    
          <div class="number_keyboard-numbers-left-number" v-for="(item,index) in numberList" :key='index' 
          @click='numberClick(item)'>
            {{item}}
          </div>
          <div class="number_keyboard-numbers-left-number" @click='numberClick("0")' style="width: 66.666666666666%;">
            0
          </div>
          <div class="number_keyboard-numbers-left-number" @click="numberCancel">
            c
          </div>
        </div>
        <div class="number_keyboard-numbers-right">    
          <div class="number_keyboard-numbers-left-number number_keyboard-numbers-right-cancel" @click="pat_id = ''">
            <span>清</span>
            <span>空</span>
          </div>
          <div class=" number_keyboard-numbers-left-number number_keyboard-numbers-right-cancel" @click='numberEnter'>
            <span>确</span>
            <span>认</span>
          </div>
        </div>
      </div>
    </div>
    </Modal>
  </div>
</template>

js部分

<script>
  export default {
    name: 'inputmodal',
    props:['modaltitle','modalWidth'],//父组件传入标题以及弹窗宽度
    data() {
      return {
        numberList:[//九宫格显示数字内容
          '7','8','9',
          '4','5','6',
          '1','2','3',
        ],
        pat_id:'',//输入值
        modalView:false,//父组件可以用ref修改该值
      }
    },
    methods:{
      numberClick(item){ //数字点击
        console.log(item,'itemitem')
        this.pat_id = this.pat_id + item;
      },
      numberCancel(){ //点击取消
        // this.pat_id = this.pat_id + '';
        console.log(this.pat_id,typeof(this.pat_id),this.pat_id.length,'his.pat_id.Length')
        this.pat_id = this.pat_id.substring(0,this.pat_id.length - 1);
      },
      numberEnter(){ //点击确认
        this.modalView = false;
        this.$emit('numberEnter',this.pat_id)
      }
    }
  }
</script>

css部分

<style lang="less">
  .number_keyboard{
    // border: 1px solid red;
    &-input{
      border: 1px solid rgb(228, 227, 227);
      height: 80px;
      border-bottom: none;
      font-size: 55px;
      display: flex;
      flex-direction: row-reverse;

    }
    &-numbers{
      height: 490px;
      border: 1px solid rgb(228, 227, 227);
      border-top: none;
      border-left: none;
      display: flex;
      &-left{
        // border: 1px solid red;
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        &-number{
          border: 1px solid rgb(228, 227, 227);
          width: 33.333333333333%;
          height: 25%;
          font-size: 66px;
          text-align: center;
          line-height: 180%;
          user-select: none;
          transition: opacity 0.2s;
          outline: none;
          position: relative;
        }
        &-number::before {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          background-color: #000;
          border: inherit;
          border-color: #000;
          border-radius: inherit;
          transform: translate(-50%, -50%);
          opacity: 0;
          content: ' ';
        }
        &-number:active::before {
          opacity: 0.1;
        }
      }
      &-right{
        flex: 1;
        // border: 1px solid green;
        display: flex;
        flex-direction: column;
        &-cancel{
          flex: 1;
          border: 1px solid rgb(228, 227, 227);
          border-left: none;
          font-size: 66px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
        }
      }
    }
  }
  .ivu-modal-footer{
    display: none;
  }
</style>

结束

代码有些许不足的地方,欢迎指正.