html5 邮箱后缀自动填写,Ant Design Vue AutoComplete 通过自定义选项search实现如自动补充邮箱后缀功能...

Ant Design Vue AutoComplete 通过自定义选项search实现如自动补充邮箱后缀功能

node.js webpack开发方式

{{email}}

export default {

data() {

return {

result: [],

};

},

methods: {

search(value) {

let result;

if (!value || value.indexOf('@') >= 0) {

result = [];

} else {

result = ['ixst.com', 'gmail.com',

'163.com', 'qq.com'].map(domain => `${value}@${domain}`);

}

this.result = result;

},

},

};

浏览器方式

Ant Design Vue AutoComplete 自动补充邮箱后缀例子

body {

padding-top: 10px

}

.ant-pagination-item-link.red {

color: red;

padding-left: 6px;

padding-right: 6px;

}

{{email}}

var app = new Vue({

el: '#app',

data() {

return {

dataSource: [],

};

},

methods: {

search(value) {

let result;

if (!value || value.indexOf('@') >= 0) {

result = [];

} else {

result = ['ixst.com', 'gmail.com', '163.com','qq.com'];

for(var i=0;i

{

result[i]=value+"@"+result[i]

}

}

this.dataSource = result;

},

},

});

例子