feat: 增加清空搜索框的按钮 #18

src/cpns/ClipSearch.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="clip-search">
     <input v-model="filterText" type="text" placeholder="🔍 检索剪贴板历史" />
+    <span v-show="filterText" @click="clear" class="clip-search-suffix">✖</span>
   </div>
 </template>
 
@@ -16,11 +17,14 @@ const filterText = ref('')
 const emit = defineEmits(['update:modelValue'])
 // filterText变了 通知父组件修改 modelValue的值
 watch(filterText, (val) => emit('update:modelValue', val))
+
 // modelValue变了 更新 filterText的值
 watch(
   () => props.modelValue,
   (val) => (filterText.value = val)
 )
+
+const clear = () => emit('update:modelValue', '')
 </script>
 
 <style lang="less" scoped>

src/style/cpns/clip-search.less

@@ -18,4 +18,20 @@
       color: @text-color-lighter;
     }
   }
+  .clip-search-suffix {
+    text-align: center;
+    position: absolute;
+    right: 20px;
+    top: 18px;
+    font-size: 13px;
+    padding: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: @nav-bg-color;
+    border-radius: 20px;
+    cursor: pointer;
+    &:hover {
+      background-color: @nav-hover-bg-color;
+    }
+  }
 }