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>