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

父组件

<template><div><!-- 数字键盘 --><NumericKeyboardv-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"draggableid="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

<NumericKeyboardv-model:myDialogFormVisible="myDialogFormVisible":myValueRange="myValueRange"@submit="numericKeyboardSubmitData"/>const emit = defineEmits(['update:myDialogFormVisible','submit']);
emit('update:myDialogFormVisible',false);

方法

submit()

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