fix: 修复SchemaSelect清空及placeholder逻辑

刘汉宸
1 parent 60dc37a2
Showing 1 changed file with 25 additions and 14 deletions Show diff stats
packages/schema-select/index.vue
@@ -15,6 +15,7 @@
   <el-popover class="z-schema-select" popper-class="z-schema-select__popper" v-model="visible" trigger="manual" placement="bottom-start" transition="el-zoom-in-top" @show="onTriggerShow">
     <template #reference>
       <el-input
+        ref="input"
         v-model="model"
         :size="selectSize"
         :disabled="selectDisabled"
@@ -27,7 +28,7 @@
         @mouseleave.native="inputHovering = false"
       >
         <template #suffix>
-          <i v-if="showClose" class="el-input__icon el-icon-circle-close" @click="onClear"></i>
+          <i v-if="showClose" class="el-input__icon el-icon-circle-close" @click="onClear" @mouseenter="clearHovering = true" @mouseleave="clearHovering = false"></i>
           <i v-else class="el-input__icon"></i>
         </template>
       </el-input>
@@ -156,6 +157,7 @@ export default {
       loading: false,
       loaded: false,
       inFocus: false,
+      clearHovering: false,
     };
   },
   created() {
@@ -289,40 +291,49 @@ export default {
       }
     },
     onInputFocus() {
-      this.visible = true;
-      this.inFocus = true;
-      if (!this.allowCreate) {
-        this.model = '';
+      if (!this.clearHovering) {
+        this.visible = true;
+        this.inFocus = true;
+        this.query = this.model;
+        if (!this.allowCreate) {
+          this.model = '';
+        }
       }
     },
     onInputBlur() {
       this.inFocus = false;
-      if (!this.visible) {
-        this.model = this.selectedLabel;
-      }
+      this.$nextTick(() => {
+        if (!this.visible) {
+          this.query = '';
+          if (!this.allowCreate) {
+            this.model = this.selectedLabel;
+          }
+        }
+      });
     },
     onClickoutside() {
       if (!this.inFocus) {
         this.visible = false;
-      }
-      if (this.visible) {
         this.model = this.selectedLabel;
-        this.query = '';
+        this.query = this.selectedLabel;
       }
     },
     // 点击表格行
     onTableRowClick(row) {
-      this.query = '';
       this.model = this.selectedLabel;
+      this.$nextTick(() => {
+        this.query = this.selectedLabel;
+      });
       this.visible = false;
       this.$emit('input', row[this.valueKey]);
       this.$emit('change', row);
     },
     // 清空
-    onClear(event) {
-      event.stopPropagation();
+    onClear() {
       this.query = '';
       this.model = '';
+      this.clearHovering = false;
+      this.$refs.input.blur();
       this.$emit('input', '');
       this.$emit('clear');
       this.$emit('change', '');