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 })