<template>
|
<a-select v-bind="bindProps" @change="onChange" @search="onSearch" />
|
</template>
|
|
<script lang="ts">
|
import { propTypes } from '/@/utils/propTypes';
|
import { defineComponent, ref, watch, computed } from 'vue';
|
|
// 可以输入的下拉框（此组件暂时没有人用）
|
export default defineComponent({
|
name: 'JSelectInput',
|
props: {
|
options: propTypes.array.def(() => []),
|
},
|
emits: ['change', 'update:value'],
|
setup(props, { emit, attrs }) {
|
// 内部 options 选项
|
const options = ref<any[]>([]);
|
// 监听外部 options 变化，并覆盖内部 options
|
watch(
|
() => props.options,
|
() => {
|
options.value = [...props.options];
|
},
|
{ deep: true, immediate: true }
|
);
|
// 合并 props 和 attrs
|
const bindProps: any = computed(() =>
|
Object.assign(
|
{
|
showSearch: true,
|
},
|
props,
|
attrs,
|
{
|
options: options.value,
|
}
|
)
|
);
|
|
function onChange(...args: any[]) {
|
deleteSearchAdd(args[0]);
|
emit('change', ...args);
|
emit('update:value', args[0]);
|
}
|
|
function onSearch(value) {
|
// 是否找到了对应的项，找不到则添加这一项
|
let foundIt =
|
options.value.findIndex((option) => {
|
return option.value.toString() === value.toString();
|
}) !== -1;
|
// !!value ：不添加空值
|
if (!foundIt && !!value) {
|
deleteSearchAdd(value);
|
// searchAdd 是否是通过搜索添加的
|
options.value.push({ value: value, searchAdd: true });
|
//onChange(value,{ value })
|
} else if (foundIt) {
|
onChange(value);
|
}
|
}
|
|
// 删除无用的因搜索（用户输入）而创建的项
|
function deleteSearchAdd(value = '') {
|
let indexes: any[] = [];
|
options.value.forEach((option, index) => {
|
if (option.searchAdd) {
|
if ((option.value ?? '').toString() !== value.toString()) {
|
indexes.push(index);
|
}
|
}
|
});
|
// 翻转删除数组中的项
|
for (let index of indexes.reverse()) {
|
options.value.splice(index, 1);
|
}
|
}
|
|
return {
|
bindProps,
|
onChange,
|
onSearch,
|
};
|
},
|
});
|
</script>
|
|
<style scoped></style>
|
