add on-clear event

Sergio Crisostomo
1 parent d4f39edc
Showing 3 changed files with 19 additions and 9 deletions Show diff stats
examples/routers/select.vue
src/components/select/select-head.vue
src/components/select/select.vue
@@ -671,16 +671,16 @@
  
 <template>
     <div>
-        <Select v-model="model1" size="small" style="width:200px;">
+        <Select v-model="model1" size="small" style="width:200px;" >
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
-        <Select v-model="model10" size="small" multiple style="width:260px">
+        <Select v-model="model10" size="small" multiple style="width:260px" >
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
  
         <br><br>
  
-        <Select v-model="model1" size="large" style="width:200px">
+        <Select v-model="model1" size="large" style="width:200px" clearable @on-clear="onClear">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
         <Select v-model="model10" size="large" multiple style="width:260px">
@@ -698,11 +698,11 @@
         <Select v-model="model10" multiple style="width:260px">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
-        
+
         <br><br>
-        
+
         <br><br>
-        
+
         <br><br>
         <br><br>
         <br><br>
@@ -713,9 +713,9 @@
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
         <br><br>
-        
+
         <br><br>
-        
+
         <br><br>
         <br><br>
         <br><br>
@@ -761,6 +761,11 @@
                 model10: [],
                 model11: []
             }
+        },
+        methods: {
+            onClear(){
+                console.log('onClear');
+            }
         }
     }
 </script>
@@ -25,7 +25,7 @@
             @blur="onInputFocus"
  
             ref="input">
-        <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="resetSelect"></Icon>
+        <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="onClear"></Icon>
         <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
     </div>
 </template>
@@ -165,6 +165,9 @@
                 if (this.filterable && e.target === this.$el){
                     this.$refs.input.focus();
                 }
+            },
+            onClear(){
+                this.$emit('on-clear');
             }
         },
         watch: {
@@ -42,6 +42,7 @@
                     @on-query-change="onQueryChange"
                     @on-input-focus="isFocused = true"
                     @on-input-blur="isFocused = false"
+                    @on-clear="clearSingleSelect"
                 />
             </slot>
         </div>
@@ -382,6 +383,7 @@
                 }
             },
             clearSingleSelect(){ // PUBLIC API
+                this.$emit('on-clear');
                 if (this.clearable) this.values = [];
             },
             getOptionData(value){