Skip to content

Commit

Permalink
fix(AutoComplete): optimize
Browse files Browse the repository at this point in the history
  • Loading branch information
@vvpvvp
vvpvvp committed Jun 6, 2019
1 parent 0746ecf commit 94b6c4b
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 84 deletions.
14 changes: 7 additions & 7 deletions doc/components/component/data/plugin/autocomplete.vue
View file
Expand Up @@ -233,13 +233,6 @@
<td>-</td>
<td>全局配置<code>autocomplete.default.title</code></td>
</tr>
<tr>
<td>getValue</td>
<td>通过数据定义出标准的输出格式</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>minWord</td>
<td>开始查询的最低单词数量</td>
Expand All @@ -261,6 +254,13 @@
<td>-</td>
<td>100</td>
</tr>
<tr>
<td>maxLength</td>
<td>搜索结果最多展示条目</td>
<td>Number</td>
<td>-</td>
<td>20</td>
</tr>
</table>

<h3>Slot top/bottom</h3>
Expand Down
4 changes: 0 additions & 4 deletions doc/components/guide/config.vue
View file
Expand Up @@ -119,10 +119,6 @@ HeyUI.config('autocomplete.configs', {
keyName: 'id',
titleName: 'name',
minWord: 1
},
pageFilter: {
keyName: 'key',
titleName: 'title'
}
});
</codes>
Expand Down
14 changes: 7 additions & 7 deletions doc/components_en/component/data/plugin/autocomplete.vue
View file
Expand Up @@ -255,13 +255,6 @@
<code>autocomplete.default.title</code>
</td>
</tr>
<tr>
<td>getValue</td>
<td>Define the standard output format through data</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>minWord</td>
<td>The minimum number of words to start the query</td>
Expand All @@ -283,6 +276,13 @@
<td>-</td>
<td>100</td>
</tr>
<tr>
<td>maxLength</td>
<td>Max length of result list</td>
<td>Number</td>
<td>-</td>
<td>20</td>
</tr>
</table>

<h3>Slot top/bottom</h3>
Expand Down
4 changes: 0 additions & 4 deletions doc/js/config/heyui-config.js
View file
Expand Up @@ -46,10 +46,6 @@ export default () => {
keyName: 'id',
titleName: 'name',
minWord: 1
},
pageFilter: {
keyName: 'key',
titleName: 'title'
}
});

Expand Down
93 changes: 33 additions & 60 deletions src/components/auto-complete/autocomplete.vue
View file
Expand Up @@ -171,9 +171,6 @@ export default {
});
},
methods: {
getKey(key) {
return key + Math.random();
},
parse() {
this.tempValue = null;
if (this.multiple) {
Expand Down Expand Up @@ -226,22 +223,8 @@ export default {
}
this.oldValue = this.value;
},
getDisposeValue() {
let inputValue = null;
if (this.type == 'key' || this.type == 'title') {
inputValue = this.tempValue;
} else if (!utils.isBlank(this.tempValue)) {
inputValue = {
[this.param.titleName]: this.tempValue
};
} else {
inputValue = null;
}
return inputValue;
},
dispose() {
let value = null;
let inputValue = this.getDisposeValue();
if (this.multiple) {
value = [];
if (utils.isArray(this.objects) && this.objects.length > 0) {
Expand All @@ -254,17 +237,21 @@ export default {
if (this.mustMatch) {
value = this.getV(this.object);
} else {
if (!utils.isNull(this.object.key) && this.object.key !== '') {
if (this.type == 'key') {
value = this.object.key;
} else if (this.type == 'title') {
value = this.object.title;
} else {
value = utils.copy(this.object.value);
if (!utils.isBlank(this.object.key)) {
value = this.getV(this.object);
} else {
if (!utils.isBlank(this.tempValue)) {
let inputValue = null;
if (this.type == 'title') {
inputValue = this.tempValue;
} else {
inputValue = {
[this.param.titleName]: this.tempValue
};
}
value = inputValue;
this.object.title = this.tempValue;
}
} else if (!utils.isNull(inputValue)) {
value = inputValue;
this.object.title = this.tempValue;
}
}
return value;
Expand All @@ -280,16 +267,12 @@ export default {
}
},
getValue(item) {
if (utils.isFunction(this.param.getValue)) {
return this.param.getValue.call(this.param, item);
if (!utils.isObject(item) && this.type == 'object') {
return utils.getValue({
[this.param.titleName]: item
}, this.param);
} else {
if (!utils.isObject(item) && this.type == 'object') {
return utils.getValue({
[this.param.titleName]: item
}, this.param);
} else {
return utils.getValue(item, this.param);
}
return utils.getValue(item, this.param);
}
},
focus(event) {
Expand All @@ -315,7 +298,7 @@ export default {
let focusValue = this.focusValue;
if (focusValue !== nowValue) {
if (this.mustMatch) {
if (this.focusValue != '' && !this.multiple) {
if (!this.multiple && this.object.key != null) {
this.object = {
key: null,
title: null,
Expand All @@ -326,7 +309,7 @@ export default {
this.tempValue = null;
}
} else {
if (nowValue) {
if (this.multiple && nowValue) {
this.objects.push(this.getValue(nowValue));
}
this.setvalue('blur');
Expand Down Expand Up @@ -366,7 +349,7 @@ export default {
let nowValue = (this.tempValue = event.target.value);
event.preventDefault();
if (this.nowSelected >= 0) {
this.add(this.results[this.nowSelected]);
this.update(this.results[this.nowSelected]);
this.setvalue('enter');
} else {
if (!this.mustMatch && this.multiple && nowValue) {
Expand All @@ -378,6 +361,7 @@ export default {
search() {
let target = this.$refs.input;
let value = target.value;
// log('this.tempValue', this.tempValue, 'value', value);
this.tempValue = value || null;
if (value != this.object.title && this.object.title) {
this.object.key = null;
Expand Down Expand Up @@ -430,7 +414,7 @@ export default {
}
});
},
add(data) {
update(data) {
if (this.multiple) {
this.objects.push(utils.copy(data));
} else {
Expand All @@ -451,12 +435,11 @@ export default {
this.setvalue('remove');
},
picker(data) {
this.add(data);
this.update(data);
this.setvalue('picker');
},
setvalue(trigger) {
if (this.disabled) return;
// log('setvalue', trigger)
this.lastTrigger = trigger;
this.nowSelected = -1;
let value = (this.oldValue = this.dispose());
Expand All @@ -467,10 +450,6 @@ export default {
} else {
this.tempValue = this.object.title;
}
// if (this.mustMatch || this.object.key || this.multiple) {
// }
// this.focusValue = this.showValue;
// if (this.object.key === null) this.object.title = this.showValue
this.$emit('input', value, trigger);
this.$emit(
'change',
Expand Down Expand Up @@ -511,18 +490,11 @@ export default {
return this.emptyContent || this.t('h.autoComplate.emptyContent');
},
param() {
if (this.config) {
return utils.extend({},
config.getOption('autocomplete.default'),
config.getOption(`autocomplete.configs.${this.config}`),
this.option
);
} else {
return utils.extend({},
config.getOption('autocomplete.default'),
this.option
);
}
return utils.extend({},
config.getOption('autocomplete.default'),
this.config ? config.getOption(`autocomplete.configs.${this.config}`) : {},
this.option
);
},
autocompleteCls() {
let autosize = !!this.noBorder;
Expand Down Expand Up @@ -576,8 +548,9 @@ export default {
return keyArray.indexOf(item[this.param.keyName]) == -1;
});
}
if (this.maxList) {
datas.splice(0, this.maxList);
// maxLength
if (this.param.maxLength) {
datas.splice(this.param.maxLength);
}
let results = [];
for (let data of datas) {
Expand Down
2 changes: 1 addition & 1 deletion src/utils/config.js
View file
Expand Up @@ -57,7 +57,7 @@ const config = {
autocomplete: {
configs: {},
default: {
maxList: 20,
maxLength: 20,
delay: 100,
loadData: null,
minWord: 0,
Expand Down
2 changes: 1 addition & 1 deletion themes/components/auto-complete.less
View file
Expand Up @@ -56,7 +56,7 @@
}
}
.@{autocompleteCls}-empty-content {
color: @gray4-color;
color: @dark4-color;
text-align: center;
}
}

0 comments on commit 94b6c4b

Please sign in to comment.