Merge branch 'hqyDev' of http://git.dayaedu.com/huangqiyong/pptList into test-online

src/components/Input.vue

@@ -19,9 +19,10 @@
       @input="$event => handleInput($event)"
       @focus="$event => handleFocus($event)"
       @blur="$event => handleBlur($event)"
-      @change="$event => emit('change', $event)"
+      @change="$event => emit('change', ($event.target as HTMLInputElement).value)"
       @keydown.enter="$event => emit('enter', $event)"
     />
+    <div v-if="clearable && value" v-show="focused" @click="handleClear" class="clear"></div>
     <span class="suffix">
       <slot name="suffix"></slot>
     </span>
@@ -37,21 +38,24 @@ withDefaults(
     disabled?: boolean
     placeholder?: string
     simple?: boolean
+    clearable?: boolean
   }>(),
   {
     disabled: false,
     placeholder: "",
-    simple: false
+    simple: false,
+    clearable: false
   }
 )
 
 const emit = defineEmits<{
   (event: "update:value", payload: string): void
   (event: "input", payload: Event): void
-  (event: "change", payload: Event): void
+  (event: "change", payload: string): void
   (event: "blur", payload: Event): void
   (event: "focus", payload: Event): void
   (event: "enter", payload: Event): void
+  (event: "clear"): void
 }>()
 
 const focused = ref(false)
@@ -68,6 +72,12 @@ const handleFocus = (e: Event) => {
   emit("focus", e)
 }
 
+function handleClear() {
+  emit("update:value", "")
+  emit("change", "")
+  emit("clear")
+}
+
 const inputRef = ref<HTMLInputElement>()
 const focus = () => {
   if (inputRef.value) inputRef.value.focus()
@@ -87,6 +97,22 @@ defineExpose({
   transition: border-color 0.25s;
   font-size: 13px;
   display: flex;
+  &:not(.disabled):hover {
+    .clear {
+      display: initial !important;
+    }
+  }
+  .clear {
+    width: 16px;
+    height: 16px;
+    background: url("./imgs/clear.png") no-repeat;
+    background-size: 100% 100%;
+    margin-right: 5px;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 
   input {
     min-width: 0;

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -23,7 +23,7 @@
           </div>
         </div>
         <div class="query">
-          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" @enter="handleQuery">
+          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" clearable @enter="handleQuery">
             <template #prefix>
               <img class="img" src="./imgs/query.png" alt="" />
             </template>

src/views/components/element/enjoyElement/resourcesList/resourcesList.vue

@@ -36,7 +36,7 @@
           </div>
         </div>
         <div class="query">
-          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" @enter="handleQuery">
+          <Input :placeholder="'请输入搜索关键词'" clearable v-model:value="queryData.name" @enter="handleQuery">
             <template #prefix>
               <img class="img" src="../../cloudCoachElement/cloudCoachList/imgs/query.png" alt="" />
             </template>