perf: 新增按键 t 使得 Search 组件自动 focus

src/components/Table/TagSearch/index.vue

@@ -29,13 +29,14 @@
       :placeholder="placeholder"
       :validate-event="false"
       class="search-input"
-      suffix-icon="el-icon-search"
+      :suffix-icon="suffixIcon"
       @blur="handleBlur"
       @change="handleConfirm"
-      @focus="focus = true"
+      @focus="handleFocus"
       @keyup.enter.native="handleConfirm"
       @keyup.delete.native="handleDelete"
     />
+    <span class="keydown-focus" :class="isFocus ? 'is-focus ' : ''">t</span>
   </div>
 
 </template>
@@ -67,10 +68,12 @@ export default {
       filterKey: '',
       filterValue: '',
       valueLabel: '',
+      suffixIcon: '',
       emptyCount: 0,
       filterTags: this.default || {},
       focus: false,
-      showCascade: true
+      showCascade: true,
+      isFocus: false
     }
   },
   computed: {
@@ -134,9 +137,22 @@ export default {
       }
     }
   },
+  mounted() {
+    document.addEventListener('keyup', this.handleKeyUp)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keyup', this.handleKeyUp)
+  },
   methods: {
+    handleFocus() {
+      this.focus = true
+      this.isFocus = true
+      this.suffixIcon = 'el-icon-search'
+    },
     handleBlur() {
       this.focus = false
+      this.isFocus = false
+      this.suffixIcon = ''
       this.$emit('blur')
     },
     // 获取url中的查询条件，判断是不是包含在当前查询条件里
@@ -329,6 +345,14 @@ export default {
       this.filterValue = v.value
       this.$refs.SearchInput.focus()
     },
+    handleKeyUp(event) {
+      // 检查按下的键是否是"T"键
+      if (event.key === 'T' || event.key === 't') {
+        this.$refs.SearchInput.focus()
+        this.suffixIcon = 'el-icon-search'
+        this.isFocus = true
+      }
+    },
     // 删除查询条件时改变url
     checkUrlFields(evt) {
       let newQuery = _.omit(this.$route.query, evt)
@@ -347,11 +371,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$borderColor-neutral-muted: #afb8c133;
+$bgColor-muted: #f6f8fa;
+$origin-white-color: #ffffff;
+
 .filter-field {
+  position: relative;
   display: flex;
   align-items:  center;
-  min-width: 198px;
-  background-color: #fff;
+  min-width: 210px;
+  background-color: $origin-white-color;
 
   .el-cascader {
     height: 28px;
@@ -413,6 +442,25 @@ export default {
       font-size: 13px;
     }
   }
+
+  .keydown-focus {
+    position: absolute;
+    right: 0;
+    display: inline-block;
+    margin-right: 10px;
+    padding: 3px 5px;
+    font-size: 11px;
+    color: var(--color-text-primary);
+    border: solid 1px $borderColor-neutral-muted;
+    border-radius: 6px;
+    line-height: 10px;
+    background-color: var(--bgColor-muted);
+    box-shadow: inset 0 -1px 0 $borderColor-neutral-muted;
+
+    &.is-focus {
+      display: none;
+    }
+  }
 }
 
 .search-input2 >>> .el-input__inner {