58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<docs>
|
|
---
|
|
order: 1
|
|
title:
|
|
zh-CN: 自定义选项
|
|
en-US: Customized
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
也可以直接传递 #dataSource 的Option。
|
|
|
|
## en-US
|
|
|
|
You could pass `#dataSource` as children of `AutoComplete`, instead of using `dataSource`.
|
|
</docs>
|
|
|
|
<template>
|
|
<a-auto-complete
|
|
v-model:value="value"
|
|
style="width: 200px"
|
|
placeholder="input here"
|
|
@search="handleSearch"
|
|
>
|
|
<template #dataSource>
|
|
<a-select-option v-for="email in result" :key="email">
|
|
{{ email }}
|
|
</a-select-option>
|
|
</template>
|
|
</a-auto-complete>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const value = ref('');
|
|
const result = ref<string[]>([]);
|
|
const handleSearch = (val: string) => {
|
|
let res: string[];
|
|
if (!val || val.indexOf('@') >= 0) {
|
|
res = [];
|
|
} else {
|
|
res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${val}@${domain}`);
|
|
}
|
|
result.value = res;
|
|
};
|
|
|
|
return {
|
|
value,
|
|
result,
|
|
handleSearch,
|
|
};
|
|
},
|
|
});
|
|
</script>
|