Kaynağa Gözat

style: 修改相机预览-搜索时交互样式

bxy 1 yıl önce
ebeveyn
işleme
1694d2fc18

+ 15 - 2
src/views/cameras/preview/components/CameraTree/CameraTree.vue

@@ -10,10 +10,15 @@
       <el-input
         class="filterTextInput"
         v-model="queryForm.queryString"
-        :suffix-icon="Search"
         placeholder="请输入相机名称/设备ID/算法名称"
         @keyup.enter.native="handleSearchCamera"
-      />
+        clearable
+        @clear="handleSearchCamera"
+      >
+        <template #suffix>
+          <el-icon class="el-input__icon" @click="handleSearchCamera"><search /></el-icon>
+        </template>
+      </el-input>
       <div style="display: flex; justify-content: space-around">
         <el-checkbox
           v-model="queryForm.isEnableAlgo"
@@ -290,4 +295,12 @@
   .nodeSelect {
     color: #0052d9;
   }
+
+  .el-input__icon {
+    cursor: pointer;
+  }
+
+  .el-input__icon:hover {
+    color: #0052d9;
+  }
 </style>