48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div :class="prefixCls">
|
|
<i-input
|
|
v-model="currentQuery"
|
|
size="small"
|
|
:icon="icon"
|
|
:placeholder="placeholder"
|
|
@on-click="handleClick"></i-input>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import iInput from '../input/input.vue';
|
|
|
|
export default {
|
|
name: 'Search',
|
|
components: { iInput },
|
|
props: {
|
|
prefixCls: String,
|
|
placeholder: String,
|
|
query: String
|
|
},
|
|
data () {
|
|
return {
|
|
currentQuery: this.query
|
|
};
|
|
},
|
|
watch: {
|
|
query (val) {
|
|
this.currentQuery = val;
|
|
},
|
|
currentQuery (val) {
|
|
this.$emit('on-query-change', val);
|
|
}
|
|
},
|
|
computed: {
|
|
icon () {
|
|
return this.query === '' ? 'ios-search' : 'ios-close-circle';
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick () {
|
|
if (this.currentQuery === '') return;
|
|
this.currentQuery = '';
|
|
this.$emit('on-query-clear');
|
|
}
|
|
}
|
|
};
|
|
</script>
|