feat: 搜索框focus时出现蓝框

src/components/table/index.vue

@@ -97,7 +97,6 @@ export default {
   },
   methods: {
     requestMoreData() {
-      console.log('needMoreData!');
       this.$emit('request-more-data')
     },
     handleSelect () {

src/views/material/audio/index.vue

@@ -29,7 +29,7 @@
         </button>
       </div>
       <div class="filter">
-        <div>
+        <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
           <i class="iconfont icon-works_search search" ></i>
           <input
             type="text"
@@ -156,6 +156,7 @@ export default {
       searchKey: "",
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
       lastestUsedSearchKey: '',
+      isFilterFocus: false,
       
       tablist: [
         {
@@ -181,6 +182,12 @@ export default {
     },
   },
   methods: {
+    onFilterFocus() {
+      this.isFilterFocus = true
+    },
+    onFilterBlur() {
+      this.isFilterFocus = false
+    },
     refreshListDebounced: debounce(function() {
       this.list = []
       this.isRequestingMoreData = false

src/views/material/image/index.vue

@@ -28,7 +28,7 @@
         </button>
       </div>
       <div class="filter">
-        <div>
+        <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
           <i class="iconfont icon-works_search search" ></i>
           <input
             type="text"
@@ -158,6 +158,7 @@ export default {
       selectedArr: [],
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
       lastestUsedSearchKey: '',
+      isFilterFocus: false,
 
       searchKey: "",
       tablist: [
@@ -184,6 +185,12 @@ export default {
     },
   },
   methods: {
+    onFilterFocus() {
+      this.isFilterFocus = true
+    },
+    onFilterBlur() {
+      this.isFilterFocus = false
+    },
     refreshListDebounced: debounce(function() {
       this.list = []
       this.isRequestingMoreData = false

src/views/material/pano/index.vue

@@ -28,7 +28,7 @@
         </button>
       </div>
       <div class="filter">
-        <div>
+        <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
           <i class="iconfont icon-works_search search"></i>
           <input
             type="text"
@@ -192,6 +192,7 @@ export default {
       searchKey: "",
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
       lastestUsedSearchKey: '',
+      isFilterFocus: false,
 
       tablist: [
         {
@@ -228,6 +229,12 @@ export default {
     },
   },
   methods: {
+    onFilterFocus() {
+      this.isFilterFocus = true
+    },
+    onFilterBlur() {
+      this.isFilterFocus = false
+    },
     refreshListDebounced: debounce(function() {
       this.list = []
       this.isRequestingMoreData = false

src/views/material/video/index.vue

@@ -28,7 +28,7 @@
         </button>
       </div>
       <div class="filter">
-          <div>
+          <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
             <i class="iconfont icon-works_search search"></i>
             <input
               type="text"
@@ -161,6 +161,7 @@ export default {
       searchKey: "",
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
       lastestUsedSearchKey: '',
+      isFilterFocus: false,
 
       tablist: [
         {
@@ -186,6 +187,12 @@ export default {
     },
   },
   methods: {
+    onFilterFocus() {
+      this.isFilterFocus = true
+    },
+    onFilterBlur() {
+      this.isFilterFocus = false
+    },
     refreshListDebounced: debounce(function() {
       this.list = []
       this.isRequestingMoreData = false

src/views/material/works/index.vue

@@ -7,7 +7,7 @@
       <span>我的作品 {{workTotalNum !== undefined ? `(${workTotalNum})`:''}}</span>
       <div class="tab-r">
          <div class="filter">
-          <div :class="{active:searchKey}">
+          <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
             <i class="iconfont iconworks_search search"></i>
             <input
               type="text"
@@ -111,6 +111,7 @@ export default {
       searchKey:'',
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
       lastestUsedSearchKey: '',
+      isFilterFocus: false,
       
       showShare:false,
       showPreview:false,
@@ -132,6 +133,12 @@ export default {
     },
   },
   methods:{
+    onFilterFocus() {
+      this.isFilterFocus = true
+    },
+    onFilterBlur() {
+      this.isFilterFocus = false
+    },
     refreshListDebounced: debounce(function() {
       this.list = []
       this.isRequestingMoreData = false