web端数字键盘

代码

<el-dialog
    title="YK弹窗1"
    v-model="ykDialogFormVisible"
    width="290px"
    append-to-body
    :close-on-click-modal="false"
    class="dialog1234"
    draggable
    :style="{background: '#FFF', color:'blue !important'}"
    id="dialog"
    :show-close="false"
    >
    <template #header="{ titleId, titleClass }">
    <div class="my-header">
        <span :id="titleId" :class="titleClass">请输入：</span>
    </div>
    </template>
    <el-form :model="ykForm" :rules="ykFormRules" ref="ykFormRef" label-position="top" style="color: #010924 !important">
        <!-- <p style="color:#010924;font-weight: 700;">请输入：</p> -->
        <el-form-item label="" label-width="0px" prop="ykValue" style="color: #010924 !important">
        <el-input v-model="ykForm.ykValue" clearable style="width1:150px"></el-input>
        </el-form-item>
        <div class="keyboard">
        <div class="keyboard-row">
            <el-button type="" size="small" @click="handleAddNumber('1')">1</el-button>
            <el-button type="" size="small" @click="handleAddNumber('2')">2</el-button>
            <el-button type="" size="small" @click="handleAddNumber('3')">3</el-button>
        </div>
        <div class="keyboard-row">
            <el-button type="" size="small" @click="handleAddNumber('4')">4</el-button>
            <el-button type="" size="small" @click="handleAddNumber('5')">5</el-button>
            <el-button type="" size="small" @click="handleAddNumber('6')">6</el-button>
        </div>
        <div class="keyboard-row">
            <el-button type="" size="small" @click="handleAddNumber('7')">7</el-button>
            <el-button type="" size="small" @click="handleAddNumber('8')">8</el-button>
            <el-button type="" size="small" @click="handleAddNumber('9')">9</el-button>
        </div>
        <div class="keyboard-row">
            <el-button type="" size="small" @click="handleAddNumber('.')">.</el-button>
            <el-button type="" size="small" @click="handleAddNumber('0')">0</el-button>
            <el-button type="" size="small" @click="handleAddNumber('#')">#</el-button>
        </div>
        <div class="keyboard-row">
            <el-button type="" size="small" @click="handelDeleteNumber('删除一个')">--</el-button>
            <el-button type="danger" size="small" @click="ykCancel">取消</el-button>
            <el-button type="primary" size="small" @click="ykSubmit('ykFormRef')">确认</el-button>
        </div>
        </div>
    </el-form>
    <!-- <template #footer>
        <div class="dialog-footer">
        <el-button type="primary" @click="ykSubmit('ykFormRef')"
            >执 行</el-button
        >
        <el-button @click="ykCancel">取 消</el-button>
        </div>
    </template> -->
</el-dialog>



function handleAddNumber(num) {
  console.log("键盘");
  console.log(ykParam.value);
  ykForm.value.ykValue += num
}
function handelDeleteNumber() {
  if (ykForm.value.ykValue.length > 0) {
      ykForm.value.ykValue = ykForm.value.ykValue.slice(0,-1)
    }
}





.keyboard {
  width: 250px;
  background: #FFF;
  // padding: 10px;
  .keyboard-row {
    width: 100%;
    height: 30px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .el-button {
      width: 56px;
      // padding: 5px;
      height: 28px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .call {
      width: 100%;
    }
  }
}
:deep(.el-dialog .el-dialog__header) {
    color: #010924 !important;
    background: #010924 !important;
  
    
}
.dialog1234{
    .el-dialog__header { //新的样式
      .el-dialog__title{
        color: #010924 !important;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }

  .my-header {
    position: absolute;
    // top: 44px;
    // color: #010924;
    // margin-top: -17px;
}
.titleClass{
  color: #010924 !important;

}