From 849cd6de02bbb097561e39b2a20bb146cb6b9892 Mon Sep 17 00:00:00 2001
From: 383514580 <383514580@qq.com>
Date: Wed, 26 Jun 2019 11:36:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9A=82=E6=97=B6=E5=8F=96=E6=B6=88auto?=
 =?UTF-8?q?Foucs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  1 +
 src/App.vue  | 20 ++++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 3e5e9d0..018fc34 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "clipboard": "^2.0.4",
     "core-js": "^2.6.5",
+    "lodash": "^4.17.11",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "vue": "^2.6.10"
diff --git a/src/App.vue b/src/App.vue
index 0c170b5..61278af 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -81,6 +81,7 @@
 <script>
 import RULES from '@/RULES';
 import ClipboardJS from 'clipboard';
+import throttle from 'lodash/throttle';
 export default {
     name: 'app',
 
@@ -90,6 +91,7 @@ export default {
         Object.freeze(RULES.reverse());
 
         return {
+            timer: null,
             keyword: '',
             rules: RULES,
             list: RULES.map(() => ({
@@ -136,10 +138,18 @@ export default {
             this.$refs.searchInput.select();
         },
 
-        mouseenterHandler(index) {
+        autoFocus(index) {
             this.$refs.input[index].focus();
         },
 
+        mouseenterHandler(index){
+           
+        },
+
+        // mouseenterHandler: throttle((index)=>{
+        //    this.$refs.input[index].focus();
+        // },1000).bind(this),
+
         reset(index) {
             this.$nextTick(() => {
                 this.list[index].value = '';
@@ -174,14 +184,16 @@ $radius: 4px;
 
 @keyframes shrinkBorder {
     from {
+        transform: translateY(-100%);
     }
     50% {
-        width: 30px;
+        width: 4px;
         opacity: 0.62;
     }
 
     to {
         left: 0;
+        transform: translateY(0);
     }
 }
 main {
@@ -195,7 +207,7 @@ main {
     .fixed {
         position: fixed;
         z-index: 1986;
-        left: 15px;
+        right: 15px;
         bottom: 15px;
         box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
         border-radius: $radius;
@@ -271,7 +283,7 @@ main {
                 border-radius: $radius;
                 border-color: #eee;
                 > .border {
-                    animation: shrinkBorder 1s;
+                    animation: shrinkBorder 0.5s;
                     left: 0;
                 }
             }