add on-clear event

This commit is contained in:
Sergio Crisostomo 2018-05-08 12:47:03 +02:00
parent d4f39edc35
commit 7dbde804d8
3 changed files with 19 additions and 9 deletions

View file

@ -671,16 +671,16 @@
<template> <template>
<div> <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> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </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> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
<br><br> <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> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
<Select v-model="model10" size="large" multiple style="width:260px"> <Select v-model="model10" size="large" multiple style="width:260px">
@ -761,6 +761,11 @@
model10: [], model10: [],
model11: [] model11: []
} }
},
methods: {
onClear(){
console.log('onClear');
}
} }
} }
</script> </script>

View file

@ -25,7 +25,7 @@
@blur="onInputFocus" @blur="onInputFocus"
ref="input"> 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> <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
</div> </div>
</template> </template>
@ -165,6 +165,9 @@
if (this.filterable && e.target === this.$el){ if (this.filterable && e.target === this.$el){
this.$refs.input.focus(); this.$refs.input.focus();
} }
},
onClear(){
this.$emit('on-clear');
} }
}, },
watch: { watch: {

View file

@ -42,6 +42,7 @@
@on-query-change="onQueryChange" @on-query-change="onQueryChange"
@on-input-focus="isFocused = true" @on-input-focus="isFocused = true"
@on-input-blur="isFocused = false" @on-input-blur="isFocused = false"
@on-clear="clearSingleSelect"
/> />
</slot> </slot>
</div> </div>
@ -382,6 +383,7 @@
} }
}, },
clearSingleSelect(){ // PUBLIC API clearSingleSelect(){ // PUBLIC API
this.$emit('on-clear');
if (this.clearable) this.values = []; if (this.clearable) this.values = [];
}, },
getOptionData(value){ getOptionData(value){