修改管理

src/components/Setting/components/Admin.vue

@@ -36,6 +36,8 @@
         class="init_password"
         v-model="initPassword"
         placeholder="请输入初始密码"
+        id="initpass"
+        @focus="showkeyboard = true"
       />
       <img
         :src="initShowPassword ? Open : Eye"
@@ -49,6 +51,8 @@
         class="update_password"
         v-model="updatePassword"
         placeholder="请输入更改密码"
+        id="updatepass"
+        @focus="showkeyboard2 = true"
       />
       <img
         :src="updateShowPassword ? Open : Eye"
@@ -60,6 +64,20 @@
     <div class="btn_wrap">
       <div class="btn" @click="handleUpdatePassword">修改</div>
     </div>
+    <div class="key_wrap" v-if="showkeyboard">
+      <SimpleKeyboard
+        :hideKeyBoard="hideKeyBoard"
+        @onChange="onChange"
+        :input="initPassword"
+      />
+    </div>
+    <div class="key_wrap" v-if="showkeyboard2" id="keyboard2">
+      <SimpleKeyboard
+        :hideKeyBoard="hideKeyBoard2"
+        @onChange="onChange2"
+        :input="updatePassword"
+      />
+    </div>
   </div>
 </template>
 
@@ -67,9 +85,10 @@
 import Eye from '@/assets/img/login/eye.png'
 import Open from '@/assets/img/login/open.png'
 import { chpasswdJSON } from '@/mock/command'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import { useWebSocketStore, useUserStore } from '@/store'
 import { showSuccessToast, showFailToast } from 'vant'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const webSocketStore = useWebSocketStore()
 const userStore = useUserStore()
@@ -80,6 +99,41 @@ const updatePassword = ref('')
 const initTip = ref('')
 const updateTip = ref('')
 
+const showkeyboard = ref(false)
+const hideKeyBoard = () => {
+  showkeyboard.value = false
+}
+
+const onChange = a => {
+  initPassword.value = a
+}
+
+const showkeyboard2 = ref(false)
+const hideKeyBoard2 = () => {
+  showkeyboard2.value = false
+}
+
+const onChange2 = a => {
+  updatePassword.value = a
+}
+
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard')
+    let room = document.getElementById('initpass')
+    if (!box?.contains(e.target) && e.target != room) {
+      hideKeyBoard()
+    }
+  })
+  document.addEventListener('click', e => {
+    let box2 = document.getElementById('keyboard2')
+    let room2 = document.getElementById('updatepass')
+    if (!box2?.contains(e.target) && e.target != room2) {
+      hideKeyBoard2()
+    }
+  })
+})
+
 const handleInitEye = () => {
   initShowPassword.value = !initShowPassword.value
 }
@@ -116,6 +170,13 @@ const handleUpdatePassword = () => {
   width: 100%;
   height: 100%;
   padding: 106px 218px 141px 218px;
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
   .title_wrap {
     display: flex;
     justify-content: center;

src/components/SimpleKeyboard.vue

@@ -60,4 +60,8 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.simple-keyboard {
+  z-index: 999 !important;
+}
+</style>