vue element-ui elementUi 邮箱自动补全邮箱自动填充

最新推荐文章于 2023-07-01 16:03:38 发布

祖先生

最新推荐文章于 2023-07-01 16:03:38 发布

阅读量2.4k

点赞数 4

文章标签： Vue.js 邮箱补全自动填充过滤器前端开发

本文链接：https://blog.csdn.net/weixin_43908123/article/details/120082702

版权

在这里插入图片描述

<el-autocomplete
    v-model="form.user.email"
    :fetch-suggestions="querySearchEmail"
    :trigger-on-focus="false"
    placeholder="接收邮件邮箱"
>
</el-autocomplete>

// 邮箱自动填充后缀名
querySearchEmail(queryString, callback) {
    const emailList = [
        { value: '@qq.com' },
        { value: '@126.com' },
        { value: '@163.com' },
        { value: '@sina.com' },
        { value: '@21cn.com' },
        { value: '@sohu.com' },
        { value: '@yahoo.com.cn' },
        { value: '@tom.com' }, 
        { value: '@etang.com' },
        { value: '@eyou.com' },
        { value: '@56.com' },
        { value: '@x.cn' },
        { value: '@chinaren.comsogou.com' },
        { value: '@citiz.com' },
    ]
    let results = []
    let queryList = []
    emailList.map(item => {
        queryList.push({ value: queryString.split('@')[0] + item.value })
    })
    results = queryString ? queryList.filter(this.createFilter(queryString)) : queryList;
    callback(results);            
},

// 邮箱填写过滤
createFilter(queryString) {
    return (item) => {
        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    };
},