输入框激活时全选所有内容

src/components/AddPreSetting.vue

@@ -3,99 +3,71 @@
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="sprayLiquidConfigVal"
           :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
-        />
+          @done="setSprayLiquidVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="stoped_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_gs"
           :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
-        />
+          @done="setStopedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="continued_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_gs"
           :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
-        />
+          @done="setcontinuedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="stoped_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
           :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
-        />
+          @done="setstoped_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="continued_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_humi"
           :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
-        />
+          @done="setcontinued_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_satur"
           :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
-        />
+          @done="setstopedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_satur"
           :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
-        />
+          @done="setContinuedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap" @click="showLogPicker">
@@ -813,7 +785,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
       }
-      .field_font {
+      :deep(.field_font) {
         font-size: 26px;
         width: 180px;
       }

src/components/LiquidHandle.vue

@@ -76,14 +76,10 @@
     </div>
     <div class="right_container">
       <div class="add_liquid_wrap" v-if="tabType == 1">
-        <van-field
-          type="number"
-          v-model="addLiquidVal"
-          readonly
+        <my-input type="number" class="add_liquid_input"
+          v-model:value="addLiquidVal"
           :formatter="formatter"
-          @click.stop="handleClickInput"
-          class="add_liquid_input"
-        />
+        ></my-input>
       </div>
       <div class="push_liquid_wrap" v-if="tabType == 2">
         <p class="num">
@@ -355,7 +351,7 @@ const handleClickInput = () => {
       background-size: 100% 100%;
       margin-bottom: 41px;
       background: url(../assets/img/liquid/form.png);
-      .add_liquid_input {
+      :deep(.add_liquid_input) {
         position: absolute;
         left: -9px;
         bottom: 8px;

src/components/MyInput.vue

@@ -0,0 +1,89 @@
+<template>
+  <van-field
+    ref="input"
+    v-model="value"
+    readonly
+    :formatter="props.formatter"
+    :class="props.class"
+    :type="props.type"
+    @click.stop="actionInputClick"
+  ></van-field>
+
+  <template v-if="keyboardVisible">
+    <van-number-keyboard v-if="'number' === props.type" 
+      v-model="value" 
+      :show="true" 
+      :title="value"
+      :theme="props.theme"
+      :close-button-text="props.closeText"
+      @input="actionKeyBoardInput" 
+      @blur="actionKeyBoardBlur"
+      @close="actionKeyBoardClose"
+    ></van-number-keyboard>
+  </template>
+</template>
+<script setup>
+import { nextTick, ref, watch } from 'vue';
+/** @var {Function} */
+const emits = defineEmits(['update:value','done']);
+/** @var {Object} */
+const props = defineProps({
+    // 格式化函数
+    formatter : { type: Function, default: value => value},
+    // 类名
+    class : { type: String, default: ''},
+    // 类型
+    type : { type: String, default: 'text'},
+    // 取值
+    value : { type: String, default: ''},
+    // 主题
+    theme : { type: String, default: ''},
+    // 关闭按钮文本
+    closeText : { type: String, default: ''},
+});
+/** @var {String} */
+const value = ref(props.value);
+/** @var {Boolean} */
+const keyboardVisible = ref(false);
+/** @var {Boolean} */
+const isFirstClick = ref(true);
+/** @var {Component} */
+const input = ref(null);
+/** @var {String} */
+let originValue = null;
+// 监听外部值变化
+watch(() => props.value, (val) => value.value = val);
+
+// 输入框点击
+async function actionInputClick() {
+    originValue = props.value;
+    isFirstClick.value = true;
+    keyboardVisible.value = true;
+    await nextTick();
+    input.value.$el.querySelector('input').select();
+    input.value.$el.querySelector('input').focus();
+}
+
+// 键盘输入
+function actionKeyBoardInput(val) {
+    if (isFirstClick.value) {
+        setTimeout(() => value.value = val + '');
+        isFirstClick.value = false
+    }
+}
+
+// 键盘失焦
+function actionKeyBoardBlur() {
+    actionKeyBoardClose();
+}
+
+// 键盘关闭
+function actionKeyBoardClose() {
+    keyboardVisible.value = false;
+    window.getSelection().removeAllRanges();
+    emits('update:value', value.value);
+    if (`${originValue}` !== value.value) {
+        emits('done');
+    }
+}
+</script>

src/components/Setting/components/Device.vue

@@ -10,126 +10,90 @@
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="sprayLiquidConfigVal"
           :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
+          @done="setSprayLiquidVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="stoped_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_gs"
           :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
+          @done="setStopedGsVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="continued_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_gs"
           :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
+          @done="setcontinuedGsVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="stoped_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
           :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
+          @done="setstoped_humiVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="continued_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_humi"
           :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
+          @done="setcontinued_humiVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_satur"
           :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
+          @done="setstopedSaturVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_satur"
           :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
+          @done="setContinuedSaturVal"
         />
       </p>
     </div>
     <div class="row_wrap" v-if="[0, 5].includes(operatorStore.disinfectStatus)">
       <p class="title">允许消毒最大湿度(%RH)</p>
       <p class="num">
-        <van-field
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="max_humidity"
           :formatter="formatter5"
-          type="number"
-          v-model="max_humidity"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(7)"
+          @done="setMaxHumidityVal"
         />
       </p>
     </div>
     <div class="row_wrap" v-if="[0, 5].includes(operatorStore.disinfectStatus)">
       <p class="title">预热时间(s)</p>
       <p class="num">
-        <van-field
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="pre_heat_time_s"
           :formatter="formatter8"
-          type="number"
-          v-model="pre_heat_time_s"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(8)"
+          @done="setHeat_timeVal"
         />
       </p>
     </div>
@@ -812,7 +776,7 @@ const setSprayLiquidVal = () => {
       color: #000000;
       display: flex;
       align-items: center;
-      .field_font {
+      :deep(.field_font) {
         font-size: 26px;
         width: 180px;
       }

src/components/Test.vue

@@ -62,14 +62,10 @@
     <div class="common_set switch_wrap">
       <p class="title">注射蠕动泵</p>
       <div class="num">
-        <van-field
-          type="number"
+        <my-input type="number" class="add_liquid_input" theme="custom" close-text="配置"
+          v-model:value="addLiquidVal2"
           :formatter="formatter7"
-          v-model="addLiquidVal2"
-          :clickable="true"
-          readonly
-          @click.stop="hideAllKeyboards(3)"
-          class="add_liquid_input"
+          @done="setHeat_timeVal"
         />
         <p>g/min</p>
       </div>
@@ -555,7 +551,7 @@ const changeDraughtStatus = flag => {
       display: flex;
       align-items: center;
       margin-right: 4px;
-      .add_liquid_input {
+      :deep(.add_liquid_input) {
         width: 40px;
         margin-right: 2px;
         text-align: right;

src/components/UpdatePreSetting.vue

@@ -3,99 +3,71 @@
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          class="field_font"
-          type="number"
-          v-model="stoped_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_gs"
           :formatter="formatter1"
-          readonly
-          @click.stop="hideClickKey(3)"
+          @done="setStopedGsVal"
         />
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢浓度(ppm)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="continued_gs"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_gs"
           :formatter="formatter2"
-          readonly
-          @click.stop="hideClickKey(4)"
-        />
+          @done="setcontinuedGsVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="stoped_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_humi"
           :formatter="formatter9"
-          readonly
-          @click.stop="hideClickKey(9)"
-        />
+          @done="setstoped_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续相对湿度(%RH)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="continued_humi"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_humi"
           :formatter="formatter10"
-          readonly
-          @click.stop="hideClickKey(10)"
-        />
+          @done="setcontinued_humiVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="stoped_satur"
           :formatter="formatter3"
-          v-model="stoped_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(5)"
-        />
+          @done="setstopedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="continued_satur"
           :formatter="formatter4"
-          v-model="continued_satur"
-          :clickable="true"
-          readonly
-          @click.stop="hideClickKey(6)"
-        />
+          @done="setContinuedSaturVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
-        <van-field
-          type="number"
-          class="field_font"
-          v-model="sprayLiquidConfigVal"
-          :clickable="true"
+        <my-input type="number" class="field_font" theme="custom" close-text="配置"
+          v-model:value="sprayLiquidConfigVal"
           :formatter="formatter7"
-          readonly
-          @click.stop="hideClickKey(2)"
-        />
+          @done="setSprayLiquidVal"
+        ></my-input>
       </p>
     </div>
     <div class="row_wrap" @click="showLogPicker">
@@ -874,7 +846,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
       }
-      .field_font {
+      :deep(.field_font) {
         font-size: 26px;
         width: 180px;
       }

src/main.js

@@ -22,6 +22,7 @@ import '@vant/touch-emulator'
 import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
+import MyInput from 'cpns/MyInput.vue'
 
 createApp(App)
   .use(router)
@@ -39,4 +40,5 @@ createApp(App)
   .use(ElementPlus)
   .use(Toast)
   .use(store)
+  .component('my-input', MyInput)
   .mount('#app')