引入键盘

src/components/AddPreSetting.vue

@@ -101,10 +101,12 @@
       <p class="title">配方名称</p>
       <div>
         <input
+          id="id_formula"
           type="text"
           v-model="formula_id"
           class="formula_input"
           placeholder="请输入配方名称"
+          @focus="handleShowKeyBoard"
         />
       </div>
     </div>
@@ -218,11 +220,15 @@
       <div class="btn" @click="save">保存</div>
       <div class="btn ml" @click="hiddleSettingModal">返回</div>
     </div>
+    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
+      <SimpleKeyboard @onChange="onChange" :input="formula_id" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import { showSuccessToast, showFailToast } from 'vant'
 import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
 import { storeToRefs } from 'pinia'
@@ -665,6 +671,24 @@ const setSprayLiquidVal = () => {
     return
   }
 }
+
+const showkeyboard = ref(false)
+const onChange = a => {
+  formula_id.value = a
+}
+const handleShowKeyBoard = () => {
+  showkeyboard.value = true
+}
+
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard_formula')
+    let room = document.getElementById('id_formula')
+    if (!box?.contains(e.target) && e.target != room) {
+      showkeyboard.value = false
+    }
+  })
+})
 </script>
 
 <style lang="scss" scoped>
@@ -762,5 +786,12 @@ const setSprayLiquidVal = () => {
       justify-content: center;
     }
   }
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
 }
 </style>