各页面搜索框加上一键清除按钮

src/views/material/audio/index.vue

@@ -43,7 +43,7 @@
         <div>
           <i
             @click="refreshList"
-            class="iconfont icon-works_search"
+            class="iconfont icon-works_search search"
           ></i>
           <input
             type="text"
@@ -51,6 +51,7 @@
             @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
+          <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
         </div>
       </div>
     </div>

src/views/material/image/index.vue

@@ -42,7 +42,7 @@
         <div>
           <i
             @click="refreshList"
-            class="iconfont icon-works_search"
+            class="iconfont icon-works_search search"
           ></i>
           <input
             type="text"
@@ -50,6 +50,7 @@
             @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
+          <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
         </div>
       </div>
     </div>

src/views/material/pano/index.vue

@@ -42,7 +42,7 @@
         <div>
           <i
             @click="refreshList"
-            class="iconfont icon-works_search"
+            class="iconfont icon-works_search search"
           ></i>
           <input
             type="text"
@@ -50,6 +50,7 @@
             @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
+          <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
         </div>
       </div>
     </div>

src/views/material/style.less

@@ -168,9 +168,8 @@
   }
 }
 
-.filter>div>i {
+.filter>div>.search {
   flex: 0 0 auto;
-  cursor: pointer;
   margin-right: 12px;
   font-size: 18px;
 }
@@ -179,7 +178,6 @@
 .filter > div > input {
   flex: 1 0 auto;
   box-sizing: border-box;
-  width: 100%;
   height: 100%;
   border: none;
   background: none;
@@ -200,8 +198,8 @@
 }
 
 .filter > div >.del{
-  left: auto;
-  right: 10px;
+  cursor: pointer;
+  flex: 0 0 auto;
   font-size: 20px;
 }
 

src/views/material/video/index.vue

@@ -42,7 +42,7 @@
           <div>
             <i
               @click="refreshList"
-              class="iconfont icon-works_search"
+              class="iconfont icon-works_search search"
             ></i>
             <input
               type="text"
@@ -50,6 +50,7 @@
               @keyup.enter="refreshList"
               placeholder="搜索文件或素材"
             />
+            <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
           </div>
         </div>
     </div>

src/views/material/works/index.vue

@@ -5,7 +5,7 @@
       <div class="tab-r">
          <div class="filter">
           <div :class="{active:searchKey}">
-            <i class="iconfont iconworks_search"></i>
+            <i class="iconfont iconworks_search search"></i>
             <input
               type="text"
               placeholder="搜索作品"