vue3框架Arco Design输入邮箱选择后缀

使用：

<a-form-item field="apply_user_email" label="邮箱：" ><email v-model="apply_user_email" class="inputborder topinputw"></email>
</a-form-item>import email from '@/components/email.vue'

email.vue的代码：

<template><div><a-auto-complete v-model:model-value="model" :data="d.list" @search="handleSearch" placeholder="请输入"/></div>
</template><script setup>import { onMounted, reactive,ref,defineModel } from 'vue'const props = defineProps({id:{default:""},})const emits = defineEmits(['update:visible', 'refresh'])const d = reactive({list:[]})const model = defineModel()const handleSearch = (value)=>{if (value) {if(value.includes("@")) value = value.split("@")[0];let comlist = ["@qq.com","@163.com","@126.com","@gmail.com","@sina.com","@yahoo.com","@sohu.com"]d.list = comlist.map((_, index) => `${value}${_}`)} else {d.list = []}}
</script><style lang="less" scoped></style>