fed3e09d
 梁灏
add AutoComplete ...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template>
<i-select
ref="select"
class="ivu-auto-complete"
:label="label"
:disabled="disabled"
:clearable="clearable"
:placeholder="placeholder"
:size="size"
filterable
remote
auto-complete
:remote-method="remoteMethod"
@on-change="handleChange"
:transfer="transfer">
<slot name="input">
<i-input
ref="input"
slot="input"
v-model="currentValue"
:placeholder="placeholder"
:disabled="disabled"
:size="size"
|
|
9cc6213c
梁灏
update AutoComplete
|
24
|
:icon="inputIcon"
|
|
fed3e09d
梁灏
add AutoComplete ...
|
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
@on-click="handleClear"
@on-focus="handleFocus"
@on-blur="handleBlur"></i-input>
</slot>
<slot>
<i-option v-for="item in filteredData" :value="item" :key="item">{{ item }}</i-option>
</slot>
</i-select>
</template>
<script>
import iSelect from '../select/select.vue';
import iOption from '../select/option.vue';
import iInput from '../input/input.vue';
import { oneOf } from '../../utils/assist';
|
|
7af00356
梁灏
update AutoComplete
|
39
|
import Emitter from '../../mixins/emitter';
|
|
fed3e09d
梁灏
add AutoComplete ...
|
40
41
42
|
export default {
name: 'AutoComplete',
|
|
7af00356
梁灏
update AutoComplete
|
43
|
mixins: [ Emitter ],
|
|
fed3e09d
梁灏
add AutoComplete ...
|
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
components: { iSelect, iOption, iInput },
props: {
value: {
type: [String, Number],
default: ''
},
label: {
type: [String, Number],
default: ''
},
data: {
type: Array,
default: () => []
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: false
},
placeholder: {
type: String
},
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
|
|
9cc6213c
梁灏
update AutoComplete
|
74
75
76
|
icon: {
type: String
},
|
|
fed3e09d
梁灏
add AutoComplete ...
|
77
78
79
80
81
82
83
84
85
86
87
|
filterMethod: {
type: [Function, Boolean],
default: false
},
transfer: {
type: Boolean,
default: false
}
},
data () {
return {
|
|
b904fd87
梁灏
update AutoComplete
|
88
89
|
currentValue: this.value,
disableEmitChange: false // for Form reset
|
|
fed3e09d
梁灏
add AutoComplete ...
|
90
91
92
|
};
},
computed: {
|
|
9cc6213c
梁灏
update AutoComplete
|
93
94
95
96
97
98
99
100
|
inputIcon () {
let icon = '';
if (this.clearable && this.currentValue) {
icon = 'ios-close';
} else if (this.icon) {
icon = this.icon;
}
return icon;
|
|
fed3e09d
梁灏
add AutoComplete ...
|
101
102
103
104
105
106
107
108
109
110
111
|
},
filteredData () {
if (this.filterMethod) {
return this.data.filter(item => this.filterMethod(this.currentValue, item));
} else {
return this.data;
}
}
},
watch: {
value (val) {
|
|
b904fd87
梁灏
update AutoComplete
|
112
|
this.disableEmitChange = true;
|
|
fed3e09d
梁灏
add AutoComplete ...
|
113
114
115
116
117
|
this.currentValue = val;
},
currentValue (val) {
this.$refs.select.query = val;
this.$emit('input', val);
|
|
b904fd87
梁灏
update AutoComplete
|
118
119
120
121
|
if (this.disableEmitChange) {
this.disableEmitChange = false;
return;
}
|
|
fed3e09d
梁灏
add AutoComplete ...
|
122
|
this.$emit('on-change', val);
|
|
7af00356
梁灏
update AutoComplete
|
123
|
this.dispatch('FormItem', 'on-form-change', val);
|
|
fed3e09d
梁灏
add AutoComplete ...
|
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
}
},
methods: {
remoteMethod (query) {
this.$emit('on-search', query);
},
handleChange (val) {
this.currentValue = val;
this.$refs.select.model = val;
this.$refs.input.blur();
this.$emit('on-select', val);
},
handleFocus () {
this.$refs.select.visible = true;
},
handleBlur () {
this.$refs.select.visible = false;
},
handleClear () {
|
|
b9541c05
梁灏
update AutoComplete
|
143
|
if (!this.clearable) return;
|
|
fed3e09d
梁灏
add AutoComplete ...
|
144
145
146
147
148
149
|
this.currentValue = '';
this.$refs.select.model = '';
}
}
};
</script>
|
