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', '');
...	...	@@ -15,6 +15,7 @@
15	15	<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">
16	16	<template #reference>
17	17	<el-input
	18	+ ref="input"
18	19	v-model="model"
19	20	:size="selectSize"
20	21	:disabled="selectDisabled"
...	...	@@ -27,7 +28,7 @@
27	28	@mouseleave.native="inputHovering = false"
28	29	>
29	30	<template #suffix>
30		- <i v-if="showClose" class="el-input__icon el-icon-circle-close" @click="onClear"></i>
	31	+ <i v-if="showClose" class="el-input__icon el-icon-circle-close" @click="onClear" @mouseenter="clearHovering = true" @mouseleave="clearHovering = false"></i>
31	32	<i v-else class="el-input__icon"></i>
32	33	</template>
33	34	</el-input>
...	...	@@ -156,6 +157,7 @@ export default {
156	157	loading: false,
157	158	loaded: false,
158	159	inFocus: false,
	160	+ clearHovering: false,
159	161	};
160	162	},
161	163	created() {
...	...	@@ -289,40 +291,49 @@ export default {
289	291	}
290	292	},
291	293	onInputFocus() {
292		- this.visible = true;
293		- this.inFocus = true;
294		- if (!this.allowCreate) {
295		- this.model = '';
	294	+ if (!this.clearHovering) {
	295	+ this.visible = true;
	296	+ this.inFocus = true;
	297	+ this.query = this.model;
	298	+ if (!this.allowCreate) {
	299	+ this.model = '';
	300	+ }
296	301	}
297	302	},
298	303	onInputBlur() {
299	304	this.inFocus = false;
300		- if (!this.visible) {
301		- this.model = this.selectedLabel;
302		- }
	305	+ this.$nextTick(() => {
	306	+ if (!this.visible) {
	307	+ this.query = '';
	308	+ if (!this.allowCreate) {
	309	+ this.model = this.selectedLabel;
	310	+ }
	311	+ }
	312	+ });
303	313	},
304	314	onClickoutside() {
305	315	if (!this.inFocus) {
306	316	this.visible = false;
307		- }
308		- if (this.visible) {
309	317	this.model = this.selectedLabel;
310		- this.query = '';
	318	+ this.query = this.selectedLabel;
311	319	}
312	320	},
313	321	// 点击表格行
314	322	onTableRowClick(row) {
315		- this.query = '';
316	323	this.model = this.selectedLabel;
	324	+ this.$nextTick(() => {
	325	+ this.query = this.selectedLabel;
	326	+ });
317	327	this.visible = false;
318	328	this.$emit('input', row[this.valueKey]);
319	329	this.$emit('change', row);
320	330	},
321	331	// 清空
322		- onClear(event) {
323		- event.stopPropagation();
	332	+ onClear() {
324	333	this.query = '';
325	334	this.model = '';
	335	+ this.clearHovering = false;
	336	+ this.$refs.input.blur();
326	337	this.$emit('input', '');
327	338	this.$emit('clear');
328	339	this.$emit('change', '');
...	...