修改

src/components/simpleKeyboard/SimpleKeyboardLogin.vue

-<template>
-  <div :class="keyboardClass"></div>
-</template>
-
-<script>
-import Keyboard from "simple-keyboard";
-import "simple-keyboard/build/css/index.css";
-
-export default {
-  props: {
-    keyboardClass: {
-      default: "simple-keyboard",
-      type: String
-    },
-    input: {
-      type: String
-    }
-  },
-  data: () => ({
-    keyboard: null,    
-  }),
-  mounted() {
-    this.keyboard = new Keyboard(this.keyboardClass, {
-      onChange: this.onChange,
-      onKeyPress: this.onKeyPress
-    });
-    this.setKeyboard()    
-  },
-  methods: {
-    onChange(input) {
-      this.$emit("onChange", input);
-    },
-    onKeyPress(button) {
-      this.$emit("onKeyPress", button);
-    },
-    setKeyboard() {
-      this.keyboard.setOptions({
-      layoutName: "default",
-      theme: "hg-theme-default hg-layout-default myTheme",
-      layout: {
-      default: [
-        "1 2 3 4 5 6 7 8 9 0",
-        "q w e r t y u i o p",
-        'a s d f g h j k l',
-        "{bksp} z x c v b n m {enter}",
-      ]},
-      buttonTheme: [
-        {
-          class: "bksp",
-          buttons: "{bksp}"
-        },
-        {
-          class: "enter",
-          buttons: "{enter}"
-        }
-      ],
-      display: {
-        '{bksp}': "删除",
-        '{enter}': "确认"
-      }
-    });
-    }
-  },
-  watch: {
-    input(input) {
-      this.keyboard.setInput(input); 
-    }
-  }
-};
-</script>
-<style>
-  .simple-keyboard {
-    max-width: 950px;
-    padding: 15px;
-    margin: 0 auto;
-    margin-top: 380px;
-    box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0,0,0,.6);
-  }
-
-  .hg-theme-default .hg-button.hg-standardBtn{
-    width: 48px;
-    height: 50px;
-    margin: 8px 10px;
-    font-size: 23px;
-    background-color: #fff;
-    border-radius: 8px;
-    cursor: pointer;
-    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
-    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
-  }
-  
-  .hg-theme-default .hg-button.hg-standardBtn:active {
-    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
-    background-color: #efefef;
-  }
-
-
-  .simple-keyboard.hg-layout-default .hg-button.bksp {
-    height: 50px;
-    margin: 8px 10px;
-    font-size: 23px;
-    background-color: #fff;
-    border-radius: 8px;
-    cursor: pointer;
-    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
-    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
-    background: #a8001e;
-    color: white;
-  }
-
-  .simple-keyboard.hg-layout-default .hg-button.bksp:active {
-    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
-    background-color: #efefef;
-    color: #000000;
-  }
-
-   .simple-keyboard.hg-layout-default .hg-button.enter {
-    height: 50px;
-    margin: 8px 10px;
-    font-size: 23px;
-    background-color: #fff;
-    border-radius: 8px;
-    cursor: pointer;
-    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
-    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
-    background: #a8001e;
-    color: white;
-  }
-
-  .simple-keyboard.hg-layout-default .hg-button.enter:active {
-    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
-    background-color: #efefef;
-    color: #000000;
-  }
-</style>
-
-

src/components/simpleKeyboard/SimpleKeyboardPassWord.vue

-<template>
-  <div :class="keyboardClass"></div>
-</template>
-
-<script>
-import Keyboard from "simple-keyboard";
-import "simple-keyboard/build/css/index.css";
-
-export default {
-  props: {
-    keyboardClass: {
-      default: "simple-keyboard",
-      type: String
-    },
-    input: {
-      type: String
-    }
-  },
-  data: () => ({
-    keyboard: null,    
-  }),
-  mounted() {
-    this.keyboard = new Keyboard(this.keyboardClass, {
-      onChange: this.onChange,
-      onKeyPress: this.onKeyPress
-    });
-    this.setKeyboard()    
-  },
-  methods: {
-    onChange(input) {
-      this.$emit("onChange", input);
-    },
-    onKeyPress(button) {
-      this.$emit("onKeyPress", button);
-    },
-    setKeyboard() {
-      this.keyboard.setOptions({
-      layoutName: "default",
-      theme: "hg-theme-default hg-layout-default myTheme",
-      layout: {
-      default: [
-        "1 2 3 4 5 6 7 8 9 0",
-        "q w e r t y u i o p",
-        'a s d f g h j k l',
-        "{bksp} z x c v b n m {enter}",
-      ]},
-      buttonTheme: [
-        {
-          class: "bksp",
-          buttons: "{bksp}"
-        },
-        {
-          class: "enter",
-          buttons: "{enter}"
-        }
-      ],
-      display: {
-        '{bksp}': "删除",
-        '{enter}': "确认"
-      }
-    });
-    }
-  },
-  watch: {
-    input(input) {
-      this.keyboard.setInput(input); 
-    }
-  }
-};
-</script>
-<style>
-  .simple-keyboard {
-    max-width: 950px;
-    padding: 15px;
-    margin: 0 auto;
-    box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0,0,0,.6);
-  }
-
-  .hg-theme-default .hg-button.hg-standardBtn{
-    width: 48px;
-    height: 50px;
-    margin: 8px 10px;
-    font-size: 23px;
-    background-color: #fff;
-    border-radius: 8px;
-    cursor: pointer;
-    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
-    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
-  }
-  
-  .hg-theme-default .hg-button.hg-standardBtn:active {
-    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
-    background-color: #efefef;
-  }
-
-
-  .simple-keyboard.hg-layout-default .hg-button.bksp {
-    height: 50px;
-    margin: 8px 10px;
-    font-size: 23px;
-    background-color: #fff;
-    border-radius: 8px;
-    cursor: pointer;
-    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
-    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
-    background: #a8001e;
-    color: white;
-  }
-
-  .simple-keyboard.hg-layout-default .hg-button.bksp:active {
-    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
-    background-color: #efefef;
-    color: #000000;
-  }
-
-   .simple-keyboard.hg-layout-default .hg-button.enter {
-    height: 50px;
-    margin: 8px 10px;
-    font-size: 23px;
-    background-color: #fff;
-    border-radius: 8px;
-    cursor: pointer;
-    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
-    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
-    background: #a8001e;
-    color: white;
-  }
-
-  .simple-keyboard.hg-layout-default .hg-button.enter:active {
-    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
-    background-color: #efefef;
-    color: #000000;
-  }
-</style>
-
-

src/components/simpleKeyboard/index.vue

+<template>
+    <div class="keyboardViews">
+        <ul class="keyboard">
+            <li v-for="(key,index) in keyList" :key="index" track-by="$index" :class="{delete: key === 'Delete', tab: key === 'Tab', capslock: key === 'Caps', enter: key === 'Enter', shift: key === 'Shift', space: key === 'Space', shifted: (key === 'Shift') && hasShifted, capsed: (key === 'Caps') && hasCapsed }" v-text="key" @click="clickKey(key)"></li>
+        </ul>
+    </div>
+    
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                keyList: [],
+                normalKeyList: [],
+                shiftedKeyList: [],
+                capsedKeyList: [],
+                hasShifted: false,
+                hasCapsed: false,
+                keyvalue:'',
+                closeText:'',
+            }
+    },
+    created(){
+      this.ready();
+    },
+    methods: {
+            clickKey(key) {
+                switch(key) {
+                    case "Delete":
+                        this.closeText = '';
+                        let kbt = this.keyvalue;
+                        this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
+                        break;
+
+                    case "Tab":
+                        this.closeText = '';
+                        this.keyvalue += "	";
+                        break;
+
+                    case "Enter":
+                        this.closeText = 'Enter';
+                        this.keyvalue += " ";
+                        break;
+
+                    case "Space":
+                        this.closeText = '';
+                        this.keyvalue += " ";
+                        break;
+
+                    case "Caps":
+                        this.closeText = '';
+                        this.hasCapsed = !this.hasCapsed;
+                        this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList;
+                        break;
+
+                    case "Shift":
+                        this.closeText = '';
+                        this.hasShifted = !this.hasShifted;
+                        this.keyList = this.hasShifted ? this.shiftedKeyList : this.normalKeyList;
+                        break;
+          
+                    default:
+                        this.closeText = '';
+                        this.keyvalue += key;
+                        break;
+                }
+                console.log(this.keyvalue)
+                this.$emit("updatekey",this.keyvalue,this.closeText)
+                this.$nextTick(()=>{
+                    if(this.closeText == 'Enter'){
+                        this.keyvalue = '';
+                    }
+                })
+                
+      },
+      ready() {
+            let normalKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
+                        'Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\',
+                        'Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", 'Enter',
+                        'Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift', 
+                        'Space'], 
+
+                shiftedKeyList = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', 'Delete',
+                        'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|',
+                        'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '"', 'Enter',
+                        'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', 'Shift', 
+                        'Space'],
+
+                capsedKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
+                        'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\',
+                        'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', "'", 'Enter',
+                        'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'Shift', 
+                        'Space'];
+
+            this.keyList = this.normalKeyList = normalKeyList;
+            this.shiftedKeyList = shiftedKeyList;
+            this.capsedKeyList = capsedKeyList;
+        }
+        },
+    
+    }
+</script>
+
+<style lang="scss" scoped>
+.keyboardViews{
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0,0,0,0.2);
+}
+.keyboard {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 688px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    user-select: none;
+
+    li {
+        float: left;
+        margin: 0 5px 5px 0;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 5px;
+
+        &:hover {
+            position: relative;
+            border-color: gray;
+            cursor: pointer;
+        }
+        &:active {
+            top: 1px;
+            left: 1px;
+        }
+    }
+
+    .tab, .delete {
+        width: 70px;
+    }
+    .capslock {
+        width: 80px;
+    }
+    .enter {
+        width: 77px;
+    }
+    .shift {
+        width: 102px;
+    }
+    .space {
+        clear: left;
+        width: 681px;
+    }
+    .shifted {
+        position: relative;
+        top: 1px;
+        left: 1px;
+        border-color: #e5e5e5;
+        cursor: pointer;
+    }
+    .capsed {
+        position: relative;
+        top: 1px;
+        left: 1px;
+        border-color: #e5e5e5;
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file

src/views/Login.vue

@@ -14,6 +14,7 @@
               v-model="loginForm.username"
               id="userInp"
               placeholder="输入你的用户名"
+              @focus="showkey('username')"
             ></el-input>
           </el-form-item>
           <el-form-item class="passWordInpBody">
@@ -21,16 +22,18 @@
               <img src="../assets/imgs/mima.png" />
             </div>
             <el-input
-              type="password"
+              
               v-model="loginForm.password"
               id="passWordInp"
               placeholder="输入你的密码"
+              @focus="showkey('password')"
             ></el-input>
           </el-form-item>
         </el-form>
         <button class="loginBtn" @click="LoginInitiation">安全登录</button>
       </div>
     </div>
+    <keyboard  v-on:updatekey="GetKeyVal" class="keyboardStyle" v-show="keyboardShow"></keyboard>
   </div>
 </template>
 
@@ -40,6 +43,9 @@ import { login, code } from "@/axios/api.js";
 import { encrypt } from "@/utils/rsaEncrypt.js";
 import Cookies from "js-cookie";
 import { config as appConfig } from "../config.js";
+import Keyboard from '../components/simpleKeyboard/index.vue'
+
+
 export default {
   name: "login",
   data() {
@@ -50,6 +56,8 @@ export default {
         uuid: "",
       },
       loading: false,
+      keyboardShow:false,
+      keyboardShowType:'',
     };
   },
   created() {
@@ -58,6 +66,9 @@ export default {
     // 获取用户名密码等Cookie
     this.getCookie();
   },
+  components: {
+    Keyboard
+  },
   methods: {
     getCode() {
       httpGet(code).then((res) => {
@@ -124,7 +135,32 @@ export default {
         })
       }
       this.loading = false;
-    }
+    },
+    //开启键盘
+    showkey(text){
+      this.keyboardShowType = text;
+      this.keyboardShow = true;
+      if(this.keyboardShowType == 'username'){
+        this.loginForm.username = '';
+      }else{
+        this.loginForm.password = '';
+      }
+    },
+    //关闭键盘
+    closekey(){
+      this.keyboardShow = false;
+    },
+    GetKeyVal(val,close){
+      if(close == 'Enter'){
+        this.keyboardShow = false;
+      }else{
+        if(this.keyboardShowType == 'username'){
+          this.loginForm.username = val;
+        }else{
+          this.loginForm.password = val;
+        }
+      }
+    } 
   },
 };
 </script>
@@ -134,6 +170,12 @@ export default {
   margin: 0;
   padding: 0;
 }
+.keyboardStyle{
+  position: absolute;
+  top:0;
+  left: 0;
+  z-index: 100;
+}
 .backGround {
   padding-top: 50px;
   box-sizing: border-box;