fix: clear图标不能点

hug-sun · Sep 8, 2020 · 542722a · 542722a
1 parent d6feb85
commit 542722a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 deletions.
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
@@ -138,6 +138,52 @@
 ```
 :::
 
+### 可清空单选
+
+包含清空按钮，可将选择器清空为初始状态
+
+:::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。
+```html
+<template>
+  <el-select v-model="value" clearable placeholder="请选择">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+
 ### 分组
 
 备选项进行分组展示

diff --git a/packages/select/Select.vue b/packages/select/Select.vue
@@ -4,6 +4,8 @@
     :class="[selectSize ? 'el-select--' + selectSize : '']"
     @click.stop="toggleMenu"
     v-clickoutside="handleClose"
+    @mouseenter.native="inputHovering = true"
+    @mouseleave.native="inputHovering = false"
   >
     <div
       class="el-select__tags"
@@ -102,8 +104,6 @@
       @keydown.native.esc.stop.prevent="visible = false"
       @keydown.native.tab="visible = false"
       @paste.native="debouncedOnInputChange"
-      @mouseenter.native="inputHovering = true"
-      @mouseleave.native="inputHovering = false"
     >
       <template v-slot:prefix v-if="$slots.prefix">
         <slot name="prefix"></slot>
@@ -725,7 +725,7 @@ export default {
       if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
         const value = this.modelValue.slice()
         value.pop()
-        this.$emit('input', value)
+        this.$emit('update:modelValue', value)
         this.emitChange(value)
       }
     },
@@ -799,7 +799,6 @@ export default {
         ) {
           value.push(option.value)
         }
-        // this.$emit('input', value)
         this.$emit('update:modelValue', value)
         this.emitChange(value)
         if (option.created) {
@@ -809,7 +808,6 @@ export default {
         }
         if (this.filterable) this.$refs.input.focus()
       } else {
-        // this.$emit('input', option.value)
         this.$emit('update:modelValue', option.value)
         this.emitChange(option.value)
         this.visible = false
@@ -878,7 +876,7 @@ export default {
     deleteSelected(event) {
       event.stopPropagation()
       const value = this.multiple ? [] : ''
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
       this.emitChange(value)
       this.visible = false
       this.$emit('clear')
@@ -889,7 +887,8 @@ export default {
       if (index > -1 && !this.selectDisabled) {
         const value = this.modelValue.slice()
         value.splice(index, 1)
-        this.$emit('input', value)
+        // this.$emit('input', value)
+        this.$emit('update:modelValue', value)
         this.emitChange(value)
         this.$emit('remove-tag', tag.value)
       }
@@ -965,10 +964,12 @@ export default {
   created() {
     this.cachedPlaceHolder = this.currentPlaceholder = this.placeholder
     if (this.multiple && !Array.isArray(this.modelValue)) {
-      this.$emit('input', [])
+      // this.$emit('input', [])
+      this.$emit('update:modelValue', [])
     }
     if (!this.multiple && Array.isArray(this.modelValue)) {
-      this.$emit('input', '')
+      // this.$emit('input', '')
+      this.$emit('update:modelValue', '')
     }
 
     this.debouncedOnInputChange = debounce(this.debounce, () => {