开发指南080-邮箱录入控件

wangbing11252024-11-30 17:44

一个很小的控件，就是录入时自动补全常用的后缀，很实用。

实现原理：

基于<el-autocomplete>开发，最核心的是

:fetch-suggestions="querySearchEmail"

@select="onChange"

@blur="onChange"

// 邮箱自动填充后缀名

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);

onChange() {

this.$emit("update:content", this.email);

}

用法：

import emailInput from "@/qlmcomponents/inputControl/emailInput"

components: { emailInput},