vue3（1）虚拟数字键盘的封装，（2）以及子组件改变父组件变量的值进而使子组件实时响应值的变化，（3）子组件调用父组件中的方法（带参）

父组件

<template>
    <div>
      <!-- 数字键盘 -->
      <numerickeyboard
        v-model:mydialogformvisible="mydialogformvisible" 
        :myvaluerange="myvaluerange"
        @submit="numerickeyboardsubmitdata"
      />
    </div>
</template>
  
<script setup>
import numerickeyboard from './numerickeyboard'
//数字键盘参数和方法
const mydialogformvisible = ref(false);
const myvaluerange= ref({
  min: -100,
  max: 100,
})
const myform= ref({
  mypointkey: "",
})
function numerickeyboardsubmitdata(v){

  const key = myform.value.mypointkey;
  const value = v.myvalue;
  const orderparam = {pointkey: key, pointvalue: value}
  //调用接口，提交数据
}
</script>

子组件

<template>
  <div>
    <el-dialog
      :model-value="mydialogformvisible"
      :width="width"
      append-to-body
      :close-on-click-modal="false"
      class="numeric-key-board-dialog"
      draggable
      id="dialog"
      :show-close="false"
    >
    <template #header="{ titleid, titleclass }">
      <div class="numeric-key-board-header">
        <span :id="titleid" :class="titleclass"> 请输入：</span>
      </div>
    </template>
      <el-form :model="myform" :rules="myformrules" ref="myformref" label-position="top" @submit.prevent="mysubmit('myformref')">
        <el-form-item label="" label-width="0px" prop="myvalue">
          <el-input v-model="myform.myvalue" :placeholder="'输入范围为' + myvaluerange.min + '~' + myvaluerange.max" clearable />
        </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('删除一个')">x</el-button>
            <el-button type="danger" size="small" @click="mycancel">取消</el-button>
            <el-button type="primary" size="small" @click="mysubmit('myformref')">确认</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
  
<script setup>
const { proxy } = getcurrentinstance();

const props = defineprops({
  mydialogformvisible: {
    type: boolean,
    default: false,
  },
  myvaluerange: {
    type: object,
    default: {
      min: -100,
      max: 100,
    },
  },
  width:{
    type:string,
    default:'15%',
  }
});

const myform= ref({
  myvalue: "",
})

const myformrules=ref({
  myvalue: [
    { required: true, message: "设定值不能为空", trigger: ['blur', 'change'] },
    { validator: validateykvaluerange, trigger: ['blur', 'change'] },
  ],
})
function validateykvaluerange(rule, value, callback) {
  const reg = /^-?(0(\.\d{1,2})?|[1-9]\d*(\.\d{1,2})?)$/; //允许负数和正数并且最多保留两位小数
  if (!reg.test(value)) {
    callback(new error("请输入正确的数字,可以为正数负数,浮点数,最多2位小数,如-0.12,12,12.34"));
  } else if(value.length>5){
    callback(new error("输入值不能超过5位"));
  } else if (value < props.myvaluerange.min || value > props.myvaluerange.max) {
    callback(
      new error(
        "数据范围必须在" +
          props.myvaluerange.min +
          "到" +
          props.myvaluerange.max +
          "之间"
      )
    );
  } else {
    callback();
  }
}
//表单提交
function mysubmit(r) {
    proxy.$refs[r].validate((valid) => {
      if (valid) {
        emit('submit', { myvalue: myform.value.myvalue })
      }
  });
}
// 表单重置
function reset() {
  myform.value = {
    myvalue: "",
  };
  proxy.resetform("myformref");
};

//mydialogformvisible子组件向父组件传值,以关闭弹窗
const emit = defineemits(['update:mydialogformvisible','submit']);
function mycancel() {
  emit('update:mydialogformvisible',false);
  reset();
}

function handleaddnumber(num) {
  myform.value.myvalue += num
}
function handeldeletenumber() {
  if (myform.value.myvalue.length > 0) {
      myform.value.myvalue = myform.value.myvalue.slice(0,-1)
    }
}
//检测窗口关闭时，调用
watch(()=>props.mydialogformvisible,val=>{
  reset();
})

</script>

<style lang="scss" scoped>
/* 虚拟键盘样式 */
.keyboard {
  padding: 0.1px 0 0 0;
  .keyboard-row {
    width: 100%;
    height: 30px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .el-button {
      width: 56px;
      height: 28px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .call {
      width: 100%;
    }
  }
}
.numeric-key-board-dialog{
    .el-dialog__header {
      .el-dialog__title{
        color: #ffffff !important;
        font-size: 15px;
        font-weight: 700;
      }
    }
  }

.numeric-key-board-header {
    position: absolute;
}
</style>

参数

mydialogformvisible

<numerickeyboard

v-model:mydialogformvisible="mydialogformvisible"

:myvaluerange="myvaluerange"

@submit="numerickeyboardsubmitdata"

/>

const emit = defineemits(['update:mydialogformvisible','submit']);
emit('update:mydialogformvisible',false);

方法

submit()

<numerickeyboard

v-model:mydialogformvisible="mydialogformvisible"

:myvaluerange="myvaluerange"

@submit="numerickeyboardsubmitdata"

/>

function numerickeyboardsubmitdata(v){

  const key = myform.value.mypointkey;

  const value = v.myvalue;

  const orderparam = {pointkey: key, pointvalue: value}

  //调用接口，提交数据

}

emit('submit', { myvalue: myform.value.myvalue })